[data-reach-alert][data-cl-alert] {
  display: flex;
  flex: none;
  align-items: center;
  font-weight: 500;
  border-radius: var(--br3);
  padding: var(--sp2) var(--sp3);
  color: var(--alert-color);
  background-color: var(--alert-background-color);
  border-width: 1px;
  border-style: solid;
  border-color: var(--alert-border-color);
}

[data-cl-alert-variant="error"] {
  --alert-color: var(--color-danger-700);
  --alert-background-color: var(--color-danger-000);
  --alert-border-color: var(--color-danger-000);
}

[data-cl-alert-variant="success"] {
  --alert-color: var(--color-success-700);
  --alert-background-color: var(--color-success-000);
  --alert-border-color: var(--color-success-000);
}

[data-cl-alert-variant="warning"] {
  --alert-color: var(--color-info-700);
  --alert-background-color: var(--color-info-000);
  --alert-border-color: var(--color-info-000);
}

[data-cl-alert-variant="info"] {
  --alert-color: var(--color-foreground-text);
  --alert-background-color: var(--color-foreground-accent);
  --alert-border-color: var(--color-foreground-accent);
}

[data-reach-alert][data-cl-alert] > svg:first-of-type {
  flex: none;
  margin-inline-end: var(--sp2);
}