/* Flash Messages / Toasts
 * Pairs with dismiss_controller.js for click-to-close and auto-dismiss.
 * Same anatomy serves form flashes (just message) and notification toasts
 * (icon + title + detail + view link). Optional slots, four variants.
 */

@layer components {
  .flash {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem var(--inline-space-l);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-ink);
    line-height: 1.4;

    animation: flash-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .flash + .flash {
    margin-block-start: var(--block-space-s);
  }

  /* Variants — accent color from semantic tokens */
  .flash--notice {
    --flash-accent: var(--color-positive);
    border-color: color-mix(in oklch, var(--color-positive) 40%, transparent);
    background: color-mix(in oklch, var(--color-positive) 8%, var(--color-surface));
  }

  .flash--alert {
    --flash-accent: var(--color-negative);
    border-color: color-mix(in oklch, var(--color-negative) 40%, transparent);
    background: color-mix(in oklch, var(--color-negative) 8%, var(--color-surface));
    animation: flash-in 260ms cubic-bezier(0.22, 1, 0.36, 1),
               flash-pulse 600ms ease-out 260ms;
  }

  .flash--warning {
    --flash-accent: var(--color-warning);
    border-color: color-mix(in oklch, var(--color-warning) 40%, transparent);
    background: color-mix(in oklch, var(--color-warning) 8%, var(--color-surface));
  }

  .flash--info {
    --flash-accent: var(--color-ink-muted);
    border-color: var(--color-border);
    background: var(--color-surface);
  }

  /* Icon slot (optional — only present on notification toasts) */
  .flash__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: var(--flash-accent, var(--color-ink-muted));
    background: color-mix(in oklch, var(--flash-accent, var(--color-ink-muted)) 18%, transparent);

    & svg {
      width: 1.125rem;
      height: 1.125rem;
    }
  }

  /* Body — title + message stack */
  .flash__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .flash__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.3;
  }

  .flash__message {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-ink);
  }

  .flash__title + .flash__message {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
  }

  /* Inline secondary action — "Mute this kind" (button_to wraps in a form) */
  .flash__secondary {
    align-self: flex-start;
    margin: 0.25rem 0 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-ink-muted);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklch, var(--color-ink-muted) 40%, transparent);
    text-underline-offset: 2px;
    cursor: pointer;

    &:hover {
      color: var(--color-ink);
      text-decoration-color: currentColor;
    }
  }

  .flash__body > form {
    margin: 0;
  }

  /* Action link (optional — "View" / "Download PDF" affordance) */
  .flash__action {
    flex-shrink: 0;
    align-self: center;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--flash-accent, var(--color-ink));
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 100ms ease;

    &:hover {
      background: color-mix(in oklch, var(--flash-accent, var(--color-ink)) 12%, transparent);
    }
  }

  /* Close button */
  .flash__close {
    flex-shrink: 0;
    align-self: flex-start;
    padding: 0;
    margin-block-start: 0.125rem;
    background: none;
    border: none;
    color: var(--color-ink-muted);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;

    &:hover {
      color: var(--color-ink);
    }
  }

  /* Hide transition for dismiss controller */
  .flash.hide {
    opacity: 0;
    translate: 0 -0.5rem;
    transition: opacity 150ms ease, translate 150ms ease;
  }

  @keyframes flash-in {
    from {
      opacity: 0;
      translate: 0 -0.75rem;
      scale: 0.98;
    }
  }

  @keyframes flash-pulse {
    0%, 100% { scale: 1; }
    50% { scale: 1.015; }
  }
}