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

.flash {
  display: flex;
  align-items: center;
  gap: var(--inline-space);
  padding: var(--block-space) var(--inline-space-l);
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.9375rem;
  line-height: 1.4;

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

  @starting-style {
    opacity: 0;
    translate: 0 -0.5rem;
  }
}

.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;
  }
}