/**
 * Toast Variant Styles
 * @countermeasure/web-components
 *
 * 1:1 visual parity with the React `Toast` primitive
 * (src/react/primitives/toast.tsx). Class rules below map directly onto the
 * React cva / utility definitions:
 *   base       -> flex w-full items-start gap-3 overflow-hidden rounded-xl
 *                 border p-4 shadow-xl backdrop-blur-xl transition-all
 *   success    -> border-accent-cyan/30 bg-accent-cyan/5 text-foreground
 *   error      -> border-accent-rose/30 bg-accent-rose/5 text-foreground
 *   warning    -> border-accent-amber/30 bg-accent-amber/5 text-foreground
 *   info       -> border-border-glass bg-glass text-foreground
 *   icon       -> size-5 + per-level accent color (cyan/rose/amber/fg-secondary)
 *   title      -> text-sm font-semibold
 *   message    -> text-sm text-foreground-secondary mt-0.5
 *   close      -> shrink-0 rounded-lg p-1 text-foreground-muted
 *                 opacity-60 hover:opacity-100
 *
 * This file supplements the base `.cmm-toast` rule in ui.css and overrides the
 * legacy properties to the Tailwind v4 `--color-*` token system so the vanilla
 * `ToastManager` renders identically to its React twin. Selectors that the
 * tests / preview story depend on (`.cmm-toast`, `.cmm-toast--<level>`,
 * `.cmm-toast__icon|content|title|message|close|progress|progress-bar`,
 * `.cmm-toast-container--<position>`, `.cmm-toast--exiting`) are preserved.
 */

/* ============================================================================
   TOAST SHELL — overrides ui.css base to match the React twin
   ============================================================================ */
.cmm-toast-container .cmm-toast {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: all 250ms;
}

/* ============================================================================
   TOAST STATUS VARIANTS
   ============================================================================ */
.cmm-toast--success {
  border-color: color-mix(in oklab, var(--color-accent-cyan) 30%, transparent);
  background-color: color-mix(in oklab, var(--color-accent-cyan) 5%, transparent);
  color: var(--color-foreground);
}

.cmm-toast--success .cmm-toast__icon {
  color: var(--color-accent-cyan);
}

.cmm-toast--error {
  border-color: color-mix(in oklab, var(--color-accent-rose) 30%, transparent);
  background-color: color-mix(in oklab, var(--color-accent-rose) 5%, transparent);
  color: var(--color-foreground);
}

.cmm-toast--error .cmm-toast__icon {
  color: var(--color-accent-rose);
}

.cmm-toast--warning {
  border-color: color-mix(in oklab, var(--color-accent-amber) 30%, transparent);
  background-color: color-mix(in oklab, var(--color-accent-amber) 5%, transparent);
  color: var(--color-foreground);
}

.cmm-toast--warning .cmm-toast__icon {
  color: var(--color-accent-amber);
}

.cmm-toast--info {
  border-color: var(--color-border-glass);
  background-color: var(--color-glass);
  color: var(--color-foreground);
}

.cmm-toast--info .cmm-toast__icon {
  color: var(--color-foreground-secondary);
}

/* ============================================================================
   TOAST ICON  (React: size-5 shrink-0)
   ============================================================================ */
.cmm-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1;
}

.cmm-toast__icon svg {
  width: 100%;
  height: 100%;
}

/* ============================================================================
   TOAST CONTENT  (React: flex-1 min-w-0)
   ============================================================================ */
.cmm-toast__content {
  flex: 1;
  min-width: 0;
}

/* React: text-sm font-semibold */
.cmm-toast__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground);
  line-height: 1.4;
}

/* React: text-sm text-foreground-secondary mt-0.5 */
.cmm-toast__message {
  font-size: 0.875rem;
  color: var(--color-foreground-secondary);
  line-height: 1.4;
  margin-top: 0.125rem;
}

/* ============================================================================
   TOAST CLOSE BUTTON
   React: shrink-0 rounded-lg p-1 text-foreground-muted opacity-60
          hover:opacity-100 transition-opacity
   ============================================================================ */
.cmm-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0.25rem;
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-foreground-secondary);
  cursor: pointer;
  opacity: 0.85;
  transition: color 150ms, background-color 150ms, opacity 150ms;
}

.cmm-toast__close:hover {
  color: var(--color-foreground);
  background-color: var(--color-glass-hover);
  opacity: 1;
}

/* ============================================================================
   TOAST PROGRESS BAR (auto-dismiss indicator)
   Vanilla-only enhancement (the React twin has no progress bar); colours
   tracked to the same accent tokens as each level.
   ============================================================================ */
.cmm-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 0 0 0 var(--radius-xl);
  background-color: color-mix(in oklab, var(--color-muted-foreground) 30%, transparent);
  animation: cmm-toast-progress linear forwards;
}

.cmm-toast--success .cmm-toast__progress {
  background-color: color-mix(in oklab, var(--color-accent-cyan) 50%, transparent);
}

.cmm-toast--error .cmm-toast__progress {
  background-color: color-mix(in oklab, var(--color-accent-rose) 50%, transparent);
}

.cmm-toast--warning .cmm-toast__progress {
  background-color: color-mix(in oklab, var(--color-accent-amber) 50%, transparent);
}

.cmm-toast--info .cmm-toast__progress {
  background-color: color-mix(in oklab, var(--color-foreground-secondary) 50%, transparent);
}

@keyframes cmm-toast-progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* ============================================================================
   CONTAINER POSITION VARIANTS
   React viewport: fixed z-[9999] flex flex-col gap-2 w-full max-w-sm + corner.
   ============================================================================ */
.cmm-toast-container--top-right {
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: auto;
  left: auto;
  z-index: var(--z-toast, 600);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 24rem;
}

.cmm-toast-container--top-left {
  position: fixed;
  top: 1rem;
  left: 1rem;
  bottom: auto;
  right: auto;
  z-index: var(--z-toast, 600);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 24rem;
}

.cmm-toast-container--bottom-right {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  top: auto;
  left: auto;
  z-index: var(--z-toast, 600);
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  max-width: 24rem;
}

.cmm-toast-container--bottom-left {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  top: auto;
  right: auto;
  z-index: var(--z-toast, 600);
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  max-width: 24rem;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 480px) {
  .cmm-toast-container--top-right,
  .cmm-toast-container--top-left,
  .cmm-toast-container--bottom-right,
  .cmm-toast-container--bottom-left {
    left: 0.5rem;
    right: 0.5rem;
    max-width: none;
  }
}
