@layer components {
  .rs-alert {
    --rs-alert-bg: var(--rs-color-background-neutral-faded);
    --rs-alert-fg: var(--rs-color-foreground-neutral);
    --rs-alert-border: var(--rs-color-border-neutral-faded);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--rs-unit-x3);
    border: 1px solid var(--rs-alert-border);
    border-radius: var(--rs-radius-medium);
    padding: var(--rs-unit-x4);
    background: var(--rs-alert-bg);
    color: var(--rs-alert-fg);
  }

  .rs-alert[data-tone="primary"] {
    --rs-alert-bg: var(--rs-color-background-primary-faded);
    --rs-alert-fg: var(--rs-color-foreground-primary);
    --rs-alert-border: var(--rs-color-border-primary-faded);
  }

  .rs-alert[data-tone="positive"] {
    --rs-alert-bg: var(--rs-color-background-positive-faded);
    --rs-alert-fg: var(--rs-color-foreground-positive);
    --rs-alert-border: var(--rs-color-border-positive-faded);
  }

  .rs-alert[data-tone="warning"] {
    --rs-alert-bg: var(--rs-color-background-warning-faded);
    --rs-alert-fg: var(--rs-color-foreground-warning);
    --rs-alert-border: var(--rs-color-border-warning-faded);
  }

  .rs-alert[data-tone="critical"] {
    --rs-alert-bg: var(--rs-color-background-critical-faded);
    --rs-alert-fg: var(--rs-color-foreground-critical);
    --rs-alert-border: var(--rs-color-border-critical-faded);
  }
}