@layer components {
  .alert {
    --alert-background: var(--color-ink-lightest);
    --alert-border-color: var(--color-ink-lighter);
    --alert-color: var(--color-ink);

    background-color: var(--alert-background);
    border: 1px solid var(--alert-border-color);
    border-radius: var(--radius);
    color: var(--alert-color);
    padding: var(--block-space-half) var(--inline-space);
  }

  .alert--info {
    --alert-background: oklch(var(--lch-blue-lightest));
    --alert-border-color: oklch(var(--lch-blue-lighter));
    --alert-color: oklch(var(--lch-blue-darkest));
  }

  .alert--success {
    --alert-background: oklch(var(--lch-green-lightest));
    --alert-border-color: oklch(var(--lch-green-lighter));
    --alert-color: oklch(var(--lch-green-darkest));
  }

  .alert--warning {
    --alert-background: oklch(var(--lch-yellow-lightest));
    --alert-border-color: oklch(var(--lch-yellow-lighter));
    --alert-color: oklch(var(--lch-yellow-darkest));
  }

  .alert--danger {
    --alert-background: oklch(var(--lch-red-lightest));
    --alert-border-color: oklch(var(--lch-red-lighter));
    --alert-color: oklch(var(--lch-red-darkest));
  }
}