.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  gap: 4px;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-badge);
  color: var(--text-dark-primary);
  font: var(--font-c2);
  letter-spacing: var(--font-c2);
}

.badge.disabled {
  cursor: not-allowed;
}

.badge--primary {
  background-color: var(--text-dark-primary);
  color: var(--text-light-primary);
}

.badge--sm {
  height: 22px;
  font: var(--font-c3);
  letter-spacing: var(--font-c3);
}

.badge--lg {
  height: 28px;
}

.badge--error {
  background-color: var(--color-red);
  color: var(--text-light-primary);
}

.badge--error.badge--light {
  background-color: var(--red-light);
  color: var(--color-red);
}

.badge--success {
  background-color: var(--color-green);
  color: var(--text-light-primary);
}

.badge--success.badge--light {
  background-color: var(--green-light);
  color: var(--color-green);
}

.badge--warning {
  background-color: var(--yellow-light);
}

.badge--warning.badge--light {
  background-color: var(--yellow-light);
  color: var(--color-orange);
}

.badge--blue {
  background-color: var(--color-blue);
  color: var(--text-light-primary);
}

.badge--blue.badge--light {
  background-color: var(--blue-light);
  color: var(--color-blue);
}

.badge--purple {
  background-color: var(--color-purple);
  color: var(--text-light-primary);
}

.badge--purple.badge--light {
  background-color: var(--color-background-purple);
  color: var(--color-purple);
}