@layer components {
  .alert {
    background-color: var(--alert-background, var(--color-accent-light));
    border: 1px solid var(--alert-border-color, transparent);
    border-radius: var(--rounded-2xl);
    color: var(--alert-color, light-dark(var(--color-accent-text), var(--color-text)));
    font-size: var(--text-sm);
    inline-size: var(--size-full);
    padding: var(--size-4);
  }

  .alert--positive {
    --alert-background: var(--color-secondary);
    --alert-color: var(--color-primary);
  }

  .alert--negative {
    --alert-background: light-dark(#fbe3dc, #3a1d16);
    --alert-color: light-dark(var(--color-negative), #f0a594);
  }
}