.badge {
  @apply inline-flex items-center gap-x-1.5 rounded-md font-medium forced-colors:outline;
}

.badge--secondary {
  @apply bg-foreground/5 text-foreground outline-1 outline-foreground/10;
}

.badge-success {
  @apply bg-success/15 text-success-foreground hover:bg-success/25 dark:bg-success/10 dark:hover:bg-success/20;
}

.badge--destructive {
  @apply bg-destructive/15 text-destructive-foreground hover:bg-destructive/25 dark:bg-destructive/10 dark:hover:bg-destructive/20;
}

.badge--primary {
  @apply bg-primary/25 outline-1 outline-primary/50 text-blue-800 dark:bg-primary/50 dark:outline-primary/75 dark:text-primary-foreground;
}

.badge--sm {
  @apply text-xs/5 px-1.5 py-0;
}

.badge:not(.badge--sm) {
  @apply text-sm/5 px-1.5 py-0.5 sm:text-xs/5;
}