.badge {
  display: inline-flex;
  min-block-size: 1.75rem;
  align-items: center;
  gap: var(--space-1);
  inline-size: fit-content;
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--type-caption-size);
  font-weight: 800;
  line-height: 1.2;
}
.neutral {
  background: var(--surface-muted);
  color: var(--text-secondary);
}
.info {
  background: var(--status-info-surface);
  color: var(--status-info-text);
}
.success {
  background: var(--status-success-surface);
  color: var(--status-success-text);
}
.warning {
  background: var(--status-warning-surface);
  color: var(--status-warning-text);
}
.error {
  background: var(--status-error-surface);
  color: var(--status-error-text);
}
