/* Flash Messages / Toasts
 * Pairs with dismiss_controller.js for click-to-close and auto-dismiss.
 * Entry animation via @keyframes (no JavaScript).
 */

@layer components {
  .flash {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space) 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;

    /* Entry animation */
    animation: flash-in 200ms ease;
  }

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

  /* Variants — override border-color with semantic color */
  .flash--notice {
    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 {
    border-color: color-mix(in oklch, var(--color-negative) 40%, transparent);
    background: color-mix(in oklch, var(--color-negative) 8%, var(--color-surface));
  }

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

  /* Close button inside flash */
  .flash__close {
    margin-inline-start: auto;
    padding: 0;
    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.5rem;
    }
  }
}