/* toast — frosted notifications with a time-left line
 *
 * Enter, exit and restacking are animated with GSAP (app.js).
 * The timer line is a CSS animation; hovering pauses it, and its
 * animationend dismisses the toast (see toast.templ).
 */
@layer components {
  .toaster {
    --toast-ms: 5s;
    --toast-w: 22.5rem;
    position: fixed;
    z-index: var(--z-toast);
    inset-block-end: var(--space-3);
    inset-inline-end: var(--space-3);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-1);
    inline-size: min(100% - 2 * var(--space-2), var(--toast-w));
    pointer-events: none;

    @media (width < 560px) { inset-inline-end: var(--space-2); inset-block-end: var(--space-2); }
  }

  .toast {
    --toast-highlight: color-mix(in oklab, white 50%, transparent);
    --t: var(--accent);
    --t-soft: var(--accent-soft);
    --t-text: var(--accent-text);

    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: var(--control-sm) minmax(0, 1fr) var(--space-3);
    align-items: center;
    column-gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--surface-2) 70%, transparent);
    backdrop-filter: blur(var(--blur-lg)) saturate(1.6);
    border: var(--border-width) solid color-mix(in oklab, var(--ink) 9%, transparent);
    box-shadow:
      inset 0 var(--border-width) 0 var(--toast-highlight),
      var(--shadow-lg);
    color: var(--ink);
    pointer-events: auto;

    transform-origin: bottom right;

    &[data-leaving] { pointer-events: none; }

    &[data-variant="success"] { --t: var(--success); --t-soft: var(--success-soft); --t-text: var(--success-text); }
    &[data-variant="danger"] { --t: var(--danger); --t-soft: var(--danger-soft); --t-text: var(--danger-text); }
    &[data-variant="warning"] { --t: var(--warning); --t-soft: var(--warning-soft); --t-text: var(--warning-text); }
    &[data-variant="info"] { --t: var(--info); --t-soft: var(--info-soft); --t-text: var(--info-text); }

    &:hover .toast__timer { animation-play-state: paused; }
  }

  .toast__icon {
    display: grid;
    place-items: center;
    inline-size: var(--control-sm);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--t-soft);
    color: var(--t-text);

    > span { display: grid; }
    .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
  }

  .toast__body {
    strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
    p { margin-block-start: var(--space-0-5); font-size: var(--text-xs); line-height: var(--leading-cozy); color: var(--ink-2); }
  }

  .toast__close {
    display: grid;
    place-items: center;
    inline-size: var(--space-3);
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--muted);
    transition: background-color var(--dur-fast), color var(--dur-fast);

    .icon { inline-size: var(--icon-xs); block-size: var(--icon-xs); }
    &:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--ink); }
    &:focus-visible { outline: none; box-shadow: var(--ring); }
  }

  .toast__timer {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: var(--border-width-strong);
    background: var(--t);
    transform-origin: left center;
    animation: toast-timer var(--toast-ms) linear forwards;
  }

  @keyframes toast-timer { to { scale: 0 1; } }
}