.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--color-gray-bg);
  color: var(--color-gray);
  white-space: nowrap;
}

.badge--primary {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.badge--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}
.badge--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.badge--gray {
  background: var(--color-gray-bg);
  color: var(--color-gray);
}