/* Layered baseline (sfx.components). Living in @layer is intentional:
   unlayered rules — Bricks Builder element styles, child themes, user
   custom CSS — win automatically without !important or specificity
   wars. Do not unwrap the @layer block. */
@layer sfx.components {

/* ========================================
   LIST ICON STYLES
   ----------------------------------------
   Two opt-in triggers. Plain <ul> elements with neither trigger are NOT
   affected (regular browser markers remain intact).

   1. Per-list trigger — add `.list--icon` directly to a <ul> to convert
      just that one list into an icon list. Pair with a variant class
      (currently: `.is-check`) for variant-specific spacing.

   2. Wrapper trigger — add `.has-list-icons` to any ancestor (e.g. a
      Bricks Text element or a rich-content container) to convert every
      <ul> inside it into an icon list. Pair with a variant class on the
      same wrapper to apply that variant to all descendant lists.

   Examples:
     <ul class="list--icon"> … </ul>            (renders default check icon)
     <ul class="list--icon is-check"> … </ul>   (check icon + tuned spacing)
     <div class="brxe-text has-list-icons is-check"> <ul> … </ul> </div>

   Tokenization (matches buttons/forms contract):
     External wireup tokens (--list-*) default-chain to Bricks core
     spacing/color tokens with literal fallbacks; internal --sfx-list-*
     tokens are declared inside the scoped selector and used by every
     rule. Override the externals (--list-*, --list-check-icon-*) — not
     the internals.
   ======================================== */

/* Base scoped tokens declared on either trigger so they cascade to the
   ul that needs them. Colors chain to Bricks core tokens; defaults
   keep the module renderable without the parent theme. */
:is(ul.list--icon, .has-list-icons) {
  --sfx-list-gutter:         var(--list-gutter, var(--space-s, 1rem));
  --sfx-list-indent:         var(--list-indent, 0);
  --sfx-list-gap:            var(--list-gap, var(--space-2xs, 0.5rem));
  --sfx-list-item-gutter:    var(--list-item-gutter, var(--article-gutter-xs, var(--space-2xs, 0.5rem)));
  --sfx-list-icon-gap:       var(--list-icon-gap, var(--space-2xs, 0.5rem));
  --sfx-list-icon-size:      var(--list-icon-size, 1em);
  --sfx-list-icon-offset:    var(--list-icon-offset, 0);
  --sfx-list-icon-display:   var(--list-icon-display, block);
  --sfx-list-icon-url:       var(--list-icon-url, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='m14.914 4l-9.47 9.47L1.09 8.393L2.608 7.09l2.948 3.44L13.5 2.585z'/%3E%3C/svg%3E"));
  --sfx-list-icon-color:     var(--list-icon-color, var(--secondary, currentColor));
  --sfx-list-icon-bg-offset: var(--list-icon-bg-offset, 0);
  --sfx-list-icon-bg-size-pad: var(--list-icon-bg-size-pad, 8px);
  --sfx-list-icon-bg-radius: var(--list-icon-bg-radius, var(--radius-full, 9999px));
  --sfx-list-icon-bg-color:  var(--list-icon-bg-color, var(--tertiary-l-4, transparent));
}

/* base list styles — target a <ul> that carries `.list--icon` directly, or
   any <ul> that sits inside a `.has-list-icons` wrapper */
:is(ul.list--icon, .has-list-icons ul) {
  list-style: none;
  padding: 0;
  margin-block: var(--sfx-list-gutter);
  margin-inline-start: var(--sfx-list-indent);
  display: flex;
  flex-direction: column;
  gap: var(--sfx-list-gap);
}

:is(ul.list--icon, .has-list-icons ul):first-child {
  margin-block-start: 0;
}

:is(ul.list--icon, .has-list-icons ul):last-child {
  margin-block-end: 0;
}

:is(ul.list--icon, .has-list-icons ul) li + li {
  margin-block-start: var(--sfx-list-item-gutter);
}

:is(ul.list--icon, .has-list-icons ul) li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sfx-list-icon-gap);
  margin-block-start: 0;

  &::before {
    content: '';
    display: var(--sfx-list-icon-display);
    width: var(--sfx-list-icon-size);
    height: var(--sfx-list-icon-size);
    background-color: var(--sfx-list-icon-color);
    -webkit-mask-image: var(--sfx-list-icon-url);
    mask-image: var(--sfx-list-icon-url);
    mask-size: cover;
    translate: var(--sfx-list-icon-offset);
    z-index: 1;
  }

  &::after {
    content: '';
    position: absolute;
    z-index: 0;
    width: calc(var(--sfx-list-icon-size) + var(--sfx-list-icon-bg-size-pad));
    height: calc(var(--sfx-list-icon-size) + var(--sfx-list-icon-bg-size-pad));
    background-color: var(--sfx-list-icon-bg-color);
    translate: var(--sfx-list-icon-bg-offset);
    border-radius: var(--sfx-list-icon-bg-radius);
  }
}

/* --- variants ----------------------------------------------------------
   Apply the variant class on the same element as its trigger:
     - on a <ul class="list--icon is-check">
     - on a wrapper <div class="has-list-icons is-check">
   Variant overrides re-bind --sfx-list-* via --list-check-icon-* externals.
   Each chain falls back to the base --list-* token, then to a literal. */
:is(ul.list--icon, .has-list-icons).is-check {
  --sfx-list-icon-url:       var(--list-check-icon-url, var(--list-icon-url, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='m14.914 4l-9.47 9.47L1.09 8.393L2.608 7.09l2.948 3.44L13.5 2.585z'/%3E%3C/svg%3E")));
  --sfx-list-icon-color:     var(--list-check-icon-color, var(--list-icon-color, var(--secondary)));
  --sfx-list-icon-offset:    var(--list-check-icon-offset, var(--list-icon-offset, 0 .5ex));
  --sfx-list-icon-size:      var(--list-check-icon-size, var(--list-icon-size, 1em));
  --sfx-list-icon-gap:       var(--list-check-icon-icon-gap, var(--list-icon-gap, 15px));
  --sfx-list-icon-display:   var(--list-check-icon-display, var(--list-icon-display, flex));
  --sfx-list-indent:         var(--list-check-icon-indent, var(--list-indent, .5em));
  --sfx-list-gap:            var(--list-check-icon-gap, var(--list-gap, var(--space-2xs, 0.5rem)));
  --sfx-list-icon-bg-offset: var(--list-check-icon-bg-offset, var(--list-icon-bg-offset, -.4ex 0));
  --sfx-list-icon-bg-color:  var(--list-check-icon-bg-color, var(--list-icon-bg-color, var(--tertiary-l-4)));
}

.card[class*="bg-secondary"] :is(ul.list--icon, .has-list-icons).is-check {
  --sfx-list-icon-color:    var(--list-check-icon-color, var(--secondary));
  --sfx-list-icon-bg-color: var(--list-check-icon-bg-color-alt, var(--secondary-10));
}

}