.dt-status-badge {
  --dt-badge-color: var(--dt-color-text-muted);
  align-items: center;
  background: color-mix(in srgb, var(--dt-badge-color) 8%, var(--dt-color-surface));
  border: 1px solid color-mix(in srgb, var(--dt-badge-color) 24%, var(--dt-color-border));
  border-radius: 999px;
  color: var(--dt-badge-color);
  display: inline-flex;
  font-family: var(--dt-font-compact);
  font-size: .6875rem;
  font-weight: 800;
  gap: .375rem;
  letter-spacing: .04em;
  min-height: 1.625rem;
  padding: .25rem .5625rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.dt-status-badge__dot {
  background: currentColor;
  border-radius: 50%;
  height: .375rem;
  width: .375rem;
}

.dt-status-badge--success { --dt-badge-color: var(--dt-color-success); }
.dt-status-badge--warning { --dt-badge-color: var(--dt-color-warning); }
.dt-status-badge--danger { --dt-badge-color: var(--dt-color-danger); }
.dt-status-badge--info { --dt-badge-color: var(--dt-color-info); }