/**
 * Shared layout/component utility classes. Requires theme layer (stash-theme/tokens, stash-theme/tailwind-theme + overrides).
 */

@layer components {
  /**
   * ll-grid is a legacy grid class that conflicts with tailwinds out of the box grid class.
   * It's quite hard to replace it with a 1-1 swap, because there's so many default styles included in ll-grid, but it's
   * also used in conjunction with other grid classes. For example:
   *      <div class="ll-grid ll-grid-cols-4 md:ll-grid-cols-8 lg:ll-grid-cols-12">
   *
   * In this example, ll-grid has default grid-cols styles, but the dev is overriding those defaults. If we were to
   * replace ll-grid with grid in a simple find/replace, we would HAVE to include
   * `grid-cols-1 gap-x-gutter gap-y-6 md:grid-cols-12` as well, and then in examples like the one above,
   * you'd have weird conflicts and specificity issues.
   *
   * Conclusion: So, for now,
   * - `.ll-grid` & `.grid` will continue to exist in backwards-compat.css as is.
   * - `.grid` will behave as expected and is a simple utility with no baked in defaults.
   * - We're creating a custom .ll-grid class that will have the same styles but won't cause weird issues downstream.
   *   In the future we can remove this class OR keep it around if we decide we want to keep a grid utility with
   *   some baked in defaults.
   */
  .ll-grid {
    @apply grid grid-cols-1 gap-x-gutter gap-y-6 md:grid-cols-12;

    --deprecated: "WARNING: Use `grid` instead";
  }

  /**
   * This is a custom .container class that conflicts with tailwinds out of the box container class.
   * Lives in the components layer and is defined before Tailwind utilities so it is
   * always included in the output CSS and can be combined with utility classes.
   */
  .container {
    @apply max-w-container px-gutter;

    margin: 0 auto;
    position: relative;
    width: 100%;
  }

  /* helpful class to show an emdash when an element like a table cell is empty */
  .show-empty:empty::before {
    content: "—";
  }
}
