.badge,
.tag,
.pill {
  display: inline-flex;
  align-items: center;
  color: var(--color-slate);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.badge {
  min-height: 28px;
  gap: 6px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-2);
  background: var(--color-slate-bg);
}

.badge__symbol {
  min-width: 8px;
  text-align: center;
}

.badge--success {
  background: var(--color-match-bg);
  color: var(--color-match);
}

.badge--error {
  background: var(--color-diverge-bg);
  color: var(--color-diverge);
}

.badge--warning,
.badge--degraded,
.badge--conflict,
.badge--stale {
  background: var(--color-pending-bg);
  color: var(--color-pending);
}

.badge--info,
.badge--neutral,
.badge--disabled {
  background: var(--color-slate-bg);
  color: var(--color-slate);
}

.badge--replay {
  background: var(--color-match-bg);
  color: var(--color-match);
}

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

.badge--signal {
  border: 1px solid currentcolor;
}

.tag,
.pill {
  min-height: 24px;
  padding: 2px 9px;
  border: 1px solid var(--color-grid);
  background: var(--color-surface);
}

.tag {
  border-radius: var(--radius-2);
}

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

.tag--success,
.pill--success {
  border-color: var(--color-match);
  color: var(--color-match);
}

.tag--warning,
.pill--warning {
  border-color: var(--color-pending);
  color: var(--color-pending);
}

.tag--error,
.pill--error {
  border-color: var(--color-diverge);
  color: var(--color-diverge);
}