/* =======================================================
  NAME:     app/ui/toast.css
  VERSION:  v1.0.0
  UPDATED:  2025-09-20 13:40 by L. Mira
  DESCRIPTION: Toast notifications (success/error/info/warn)
               Mobile-friendly, theme-aware, queue support
  RECENT CHANGES (keep last 3)
  - v1.0.0 | 2025-09-20 13:40 | init | positions, variants, progress bar
======================================================= */

@layer components {
  :root {
    --toast-gap: 10px;
    --toast-width: min(360px, 92vw);
    --toast-bg: var(--bg-card);
    --toast-shadow: var(--shadow-md);
  }

  .ksp-toast-root { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-toast, 1100); }
  .ksp-toast-stack {
    position: absolute; right: clamp(10px, 2vw, 16px); top: clamp(10px, 2vw, 16px);
    display: flex; flex-direction: column; gap: var(--toast-gap); align-items: flex-end;
  }
  .ksp-toast { width: var(--toast-width); pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
    background: var(--toast-bg); color: var(--color-text); border-radius: var(--radius-md);
    box-shadow: var(--toast-shadow); padding: 10px 12px; transform: translateY(-8px); opacity: 0;
    transition: transform var(--dur-200) var(--ease-standard), opacity var(--dur-200) var(--ease-standard);
  }
  .ksp-toast[data-show="true"] { transform: translateY(0); opacity: 1; }
  .ksp-toast__icon { display:grid; place-items:center; color: var(--accent); }
  .ksp-toast__title { font-weight: var(--fw-600); }
  .ksp-toast__msg { color: var(--color-muted); }
  .ksp-toast__close { appearance:none; border:0; background: transparent; width:36px; height:36px; border-radius: var(--radius-pill); cursor: pointer; color: var(--color-muted); }
  .ksp-toast__close:is(:hover,:focus-visible){ background: color-mix(in oklab, var(--accent) 12%, white); color: var(--accent); }

  /* Variants */
  .ksp-toast--success { border-left: 4px solid var(--color-success); }
  .ksp-toast--error   { border-left: 4px solid var(--color-danger); }
  .ksp-toast--info    { border-left: 4px solid var(--color-info); }
  .ksp-toast--warn    { border-left: 4px solid var(--color-warning); }

  /* Progress bar */
  .ksp-toast__progress {
    height: 3px; background: color-mix(in oklab, var(--accent) 20%, transparent);
    border-radius: var(--radius-pill); overflow:hidden; grid-column: 1 / -1;
  }
  .ksp-toast__progress > i {
    display:block; height:100%; width:100%; background: var(--accent); transform-origin: left center;
    transform: scaleX(1);
  }

  /* Bottom-left on mobile (avoid notch) */
  @media (max-width: 768px){
    .ksp-toast-stack { right:auto; left: clamp(10px, 2vw, 16px); bottom: clamp(10px, 2vw, 16px); top:auto; }
  }
}