.badge {
  @apply text-sm font-semibold cursor-default bg-primary-500 text-white flex items-center gap-2 rounded-md px-2 py-1;
  font-variant: all-small-caps;
}

.badge--sm {
  @apply text-xs px-2 py-0.5;
}

.badge--warning {
  @apply bg-yellow-500 text-yellow-900;
}

.badge--success {
  @apply bg-emerald-500 text-emerald-50;
}

.badge--light {
  @apply bg-white text-primary-500 border border-primary-200 font-normal;
}

.badge--gradient {
  @apply text-white bg-gradient-to-br from-primary-300 to-purple-500;
}