.badge {
  @apply focus:ring-ring border-border inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;

  &-primary {
    @apply border-transparent bg-blue-100 text-blue-600;
  }

  &-pink {
    @apply border-transparent bg-pink-100 text-pink-700;
  }

  &-success {
    @apply border-transparent bg-green-100 text-green-600;
  }

  &-secondary {
    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
  }

  &-danger {
    @apply border-transparent bg-red-100 text-red-700;
  }

  &-warning {
    @apply border-transparent bg-yellow-100 text-yellow-700;
  }

  &-outline {
    @apply text-foreground border-border border;
  }
}