.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--text-default);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  vertical-align: middle;
}

.ui-badge__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ui-badge__indicator {
  flex: 0 0 auto;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: currentColor;
}

.ui-badge__icon {
  flex: 0 0 auto;
  line-height: 1;
}

.ui-badge--info {
  border-color: var(--state-info);
  background: var(--state-info-soft);
  color: var(--state-info);
}

.ui-badge--success {
  border-color: var(--state-ok);
  background: var(--state-ok-soft);
  color: var(--state-ok);
}

.ui-badge--warning {
  border-color: var(--state-warning);
  background: var(--state-warning-soft);
  color: var(--state-warning);
}

.ui-badge--error {
  border-color: var(--state-error);
  background: var(--state-error-soft);
  color: var(--state-error);
}

.ui-badge--pill {
  border-radius: var(--radius-pill);
}

.ui-badge--sm {
  padding: 0 var(--space-2);
  font-size: var(--font-size-xs);
}

.ui-badge--sm .ui-badge__indicator {
  width: var(--space-1);
  height: var(--space-1);
}

.ui-badge-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}