.ov-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ov-space-2);
  padding: var(--ov-space-3);
  border: 1px solid var(--ov-color-border);
  border-radius: var(--ov-radius-3);
}

.ov-alert-title {
  margin: 0 0 0.25rem;
  color: var(--ov-color-heading);
  font-size: var(--ov-step-0);
}

.ov-alert-body {
  margin: 0;
  color: var(--ov-color-text-muted);
}

.ov-alert-success {
  background: var(--ov-color-success-soft);
  border-color: color-mix(in srgb, var(--ov-color-success) 34%, var(--ov-color-border));
}

.ov-alert-warning {
  background: var(--ov-color-warning-soft);
  border-color: color-mix(in srgb, var(--ov-color-warning) 38%, var(--ov-color-border));
}

.ov-alert-danger {
  background: var(--ov-color-danger-soft);
  border-color: color-mix(in srgb, var(--ov-color-danger) 38%, var(--ov-color-border));
}

.ov-alert-info {
  background: var(--ov-color-info-soft);
  border-color: color-mix(in srgb, var(--ov-color-info) 34%, var(--ov-color-border));
}