@layer components {
  .flash {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid color-mix(in oklab, var(--flash-color, var(--color-accent)), transparent 55%);
    border-left: 4px solid var(--flash-color, var(--color-accent));
    background: color-mix(in oklab, var(--flash-color, var(--color-accent)) 8%, var(--color-surface));
    font-size: var(--text-base);
    animation: flash-in var(--duration) var(--ease);

    & button { margin-left: auto; color: var(--color-ink-muted); display: inline-flex; & svg { width: 16px; height: 16px; } }
  }

  .flash--alert, .flash--error { --flash-color: var(--color-danger); }

  @keyframes flash-in { from { opacity: 0; translate: 0 -4px; } }
}