@keyframes l-toast-countdown {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@layer components {
  /*
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   🆃🅾🅰🆂🆃
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
  - Container element using the Popover API
  - Toast items are <l-toast-item> custom elements generated programmatically
  - Positioned via margin auto on the fixed popover

  @scope keeps these rules from leaking OUT, and the reset below strips UA default
  chrome off the programmatically built internals (accent bar, content/text wrappers,
  timer bar) so the component styles from a clean slate. Caveat: this lives in
  @layer components, so it only shields the internals from UA defaults and lower-layer
  rules — *unlayered* host-page rules (a CSS reset, Tailwind preflight, naked
  `button {}`) still outrank every cascade layer and are NOT neutralized here.
  */

  @scope (l-toast) {
    /* Reset — :where() keeps specificity at (0,0,0) so the component rules below win
       over it. Strips UA default styling off the generated internals for a clean
       slate. Custom properties are NOT affected by `all` — design tokens cascade
       through.
       Exclusions:
       - img / svg / iconify-icon / l-icon carry their own intrinsic content/sizing.
       - .l-close is a self-contained styled sub-component (shared with dialog /
         drawer) that paints its X icon via `::after { mask }`; resetting it — or
         its pseudo — would wipe that icon, so both the element and its pseudos
         are kept out of the reset.
       :scope (the host) is excluded too. */
    *:where(:not(img, svg, iconify-icon, l-icon, .l-close):not(svg *):not(.l-close *)),
    *:where(:not(.l-close))::before,
    *:where(:not(.l-close))::after {
      all: unset;
      display: revert;
    }

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🅲🅾🅽🆃🅰🅸🅽🅴🆁: l-toast element
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    */

    :scope {
      --gap: 0.5rem;
      --width: 28rem;
      --show-duration: 200ms;
      --hide-duration: 200ms;

      &:not(:popover-open) {
        display: none;
      }

      &:popover-open {
        overflow-x: clip;
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        width: var(--width);
        max-width: 100%;
        padding: 1rem;
        box-sizing: border-box;
        border: 0;
        background: transparent;
        pointer-events: none;
      }

      > l-toast-item {
        pointer-events: auto;
      }
    }

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🅿🅻🅰🅲🅴🅼🅴🅽🆃: margin auto on fixed popover
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    */

    :scope[placement='top-start'] {
      margin: 0 auto auto 0;
    }
    :scope[placement='top-center'] {
      margin: 0 auto auto;
    }
    :scope[placement='top-end'] {
      margin: 0 0 auto auto;
    }
    :scope[placement='bottom-start'] {
      margin: auto auto 0 0;
    }
    :scope[placement='bottom-center'] {
      margin: auto auto 0;
    }
    :scope[placement='bottom-end'] {
      margin: auto 0 0 auto;
    }

    :scope[placement*='bottom'] {
      flex-direction: column-reverse;
    }

    @media (max-width: 480px) {
      :scope:popover-open {
        width: 100%;
        margin-inline: 0;
      }
    }

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🆃🅾🅰🆂🆃 🅸🆃🅴🅼: l-toast-item
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    */

    l-toast-item {
      --_accent-color: var(--l-color-text-neutral);
      --_shadow-color: oklch(0 0 0 / 3.5%);

      position: relative;
      touch-action: pan-y;
      display: flex;
      align-items: stretch;
      gap: 0.75rem;
      padding: 0.75rem;
      overflow: hidden;
      background: var(--l-color-surface-overlay);
      border-radius: 6px;
      box-shadow:
        0 1px 1px var(--_shadow-color),
        0 2px 2px var(--_shadow-color),
        0 4px 4px var(--_shadow-color),
        0 8px 8px var(--_shadow-color);
      border: 1px solid light-dark(oklch(0 0 0 / 7%), oklch(100% 0 0 / 10%));
      color: var(--l-color-text-primary);
      font-size: 0.875rem;
      line-height: 1.5;

      /*
      ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
       🆅🅰🆁🅸🅰🅽🆃🆂
      ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
      */

      &[variant='info'] {
        --_accent-color: var(--l-color-text-info);
        --_bg: var(--l-color-bg-fill-info-soft);
      }
      &[variant='success'] {
        --_accent-color: var(--l-color-text-success);
        --_bg: var(--l-color-bg-fill-success-soft);
      }
      &[variant='warning'] {
        --_accent-color: var(--l-color-text-warning);
        --_bg: var(--l-color-bg-fill-warning-soft);
      }
      &[variant='danger'] {
        --_accent-color: var(--l-color-text-danger);
        --_bg: var(--l-color-bg-fill-danger-soft);
      }

      &[variant] {
        --_shadow-color: color-mix(in oklab, var(--_accent-color) 8%, transparent);
        background: var(--_bg);
        color: var(--_accent-color);
      }

      /*
      ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
       🆄🅸: accent bar
      ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
      */

      > .l-toast-accent {
        width: 4px;
        flex-shrink: 0;
        border-radius: 2px;
        background: var(--_accent-color);
      }

      /*
      ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
       🆄🅸: icon
      ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
      */

      &:has(> .l-toast-icon) {
        align-items: start;
      }

      > .l-toast-icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-top: 1px;
        color: var(--_accent-color);
      }

      /*
      ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
       🆄🅸: content
      ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
      */

      > .l-toast-content {
        flex: 1;
        display: flex;
        align-items: center;
        min-width: 0;
      }

      /*
      ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
       🆄🅸: close button override
      ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
      */

      > .l-close {
        --size: 28px;
        --icon-size: 14px;
        --ring-color: color-mix(in oklab, var(--_accent-color) 40%, transparent);

        align-self: center;
        flex-shrink: 0;
      }

      /*
      ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
       🆄🅸: timer bar
      ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
      */

      > .l-toast-timer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: color-mix(in oklab, var(--_accent-color) 30%, transparent);
        transform-origin: left;
        animation: l-toast-countdown var(--_timer-duration) linear forwards;
      }

      /*
      ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
       🅰🅽🅸🅼🅰🆃🅸🅾🅽: show / hide transitions
      ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
      */

      /* EXIT STATE */
      opacity: 0;
      translate: 0 -0.5rem;

      transition-property: opacity, translate, transform;
      transition-duration: var(--hide-duration);

      /* OPEN/SHOWING STATE */
      &[showing] {
        opacity: 1;
        translate: 0 0;
        transition-duration: var(--show-duration);
      }

      /* BEFORE-OPEN STATE (entry animation) */
      @starting-style {
        &[showing] {
          opacity: 0;
          translate: 0 -0.5rem;
        }
      }
    }

    @media (prefers-reduced-motion: reduce) {
      :scope {
        --show-duration: 0ms;
        --hide-duration: 0ms;
      }
    }
  }
}