@layer components {
  .flash-region {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .flash {
    --flash-bg: var(--color-surface);
    --flash-border: var(--color-border);
    --flash-fg: var(--color-ink);
    --flash-icon: var(--color-ink-muted);

    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--flash-bg);
    border: 1px solid var(--flash-border);
    border-radius: var(--radius-md);
    color: var(--flash-fg);
    font-size: var(--text-14);
  }

  .flash__icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--flash-icon);
  }

  .flash--error {
    --flash-bg: var(--color-negative-soft);
    --flash-border: color-mix(in srgb, var(--color-negative) 30%, transparent);
    --flash-icon: var(--color-negative);
  }

  .flash--success {
    --flash-bg: var(--color-positive-soft);
    --flash-border: color-mix(in srgb, var(--color-positive) 30%, transparent);
    --flash-icon: var(--color-positive);
  }
}