.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2xs);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-full);
  font-weight: var(--ds-weight-medium);
  white-space: nowrap;
}

.ds-badge--sm {
  height: 18px;
  padding-inline: var(--ds-space-xs);
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-xs);
}

.ds-badge--md {
  height: 22px;
  padding-inline: var(--ds-space-sm);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-sm);
}

.ds-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-full);
  background-color: currentcolor;
  flex-shrink: 0;
}

/* --- subtle (default) ---------------------------------------------------- */
.ds-badge--subtle.ds-badge--neutral {
  background-color: var(--ds-color-surface-sunken);
  color: var(--ds-color-text-muted);
}
.ds-badge--subtle.ds-badge--accent {
  background-color: var(--ds-color-accent-subtle);
  color: var(--ds-color-accent-on-subtle);
}
.ds-badge--subtle.ds-badge--success {
  background-color: var(--ds-color-success-subtle);
  color: var(--ds-color-success-text);
}
.ds-badge--subtle.ds-badge--warning {
  background-color: var(--ds-color-warning-subtle);
  color: var(--ds-color-warning-text);
}
.ds-badge--subtle.ds-badge--danger {
  background-color: var(--ds-color-danger-subtle);
  color: var(--ds-color-danger-text);
}

/* --- solid --------------------------------------------------------------- */
.ds-badge--solid {
  color: var(--ds-color-accent-text);
}
.ds-badge--solid.ds-badge--neutral {
  background-color: var(--ds-color-text-muted);
}
.ds-badge--solid.ds-badge--accent {
  background-color: var(--ds-color-accent);
}
.ds-badge--solid.ds-badge--success {
  background-color: var(--ds-color-success);
}
.ds-badge--solid.ds-badge--warning {
  background-color: var(--ds-color-warning);
}
.ds-badge--solid.ds-badge--danger {
  background-color: var(--ds-color-danger);
}

/* --- outline ------------------------------------------------------------- */
.ds-badge--outline {
  background-color: transparent;
}
.ds-badge--outline.ds-badge--neutral {
  border-color: var(--ds-color-border-strong);
  color: var(--ds-color-text-muted);
}
.ds-badge--outline.ds-badge--accent {
  border-color: var(--ds-color-accent-border);
  color: var(--ds-color-accent-on-subtle);
}
.ds-badge--outline.ds-badge--success {
  border-color: var(--ds-color-success-border);
  color: var(--ds-color-success-text);
}
.ds-badge--outline.ds-badge--warning {
  border-color: var(--ds-color-warning-border);
  color: var(--ds-color-warning-text);
}
.ds-badge--outline.ds-badge--danger {
  border-color: var(--ds-color-danger-border);
  color: var(--ds-color-danger-text);
}