.ov-badge {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  color: var(--ov-color-text);
  background: var(--ov-color-bg-subtle);
  border: 1px solid var(--ov-color-border);
  border-radius: var(--ov-radius-pill);
  font-size: var(--ov-step--2);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.ov-badge-new,
.ov-badge-beta,
.ov-badge-info {
  color: var(--ov-color-primary);
  background: var(--ov-color-primary-soft);
  border-color: color-mix(in srgb, var(--ov-color-primary) 32%, var(--ov-color-border));
}

.ov-badge-updated,
.ov-badge-success,
.ov-badge-stable {
  color: var(--ov-color-success);
  background: var(--ov-color-success-soft);
  border-color: color-mix(in srgb, var(--ov-color-success) 32%, var(--ov-color-border));
}

.ov-badge-warning,
.ov-badge-coming-soon {
  color: var(--ov-color-warning);
  background: var(--ov-color-warning-soft);
  border-color: color-mix(in srgb, var(--ov-color-warning) 36%, var(--ov-color-border));
}

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