.badge {
  background-color: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 0.25rem;
  display: inline-block;
  font-size: 0.875rem;
  padding: 0 0.25rem;
  color: var(--gray-800);
}

a.badge {
  text-decoration: none;
}

.badge--success {
  background-color: var(--green-50);
  border-color: var(--green-200);
  color: var(--green-700);
}

.badge--info {
  background-color: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-700);
}

.badge--warning {
  background-color: var(--yellow-50);
  border-color: var(--yellow-200);
  color: var(--yellow-700);
}

.badge--danger {
  background-color: var(--red-50);
  border-color: var(--red-200);
  color: var(--red-700);
}