.badge {
  @apply inline-flex items-center rounded-full border border-gray-100 px-2 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 dark:border-gray-800 dark:focus:ring-gray-300 pointer-events-none;
}

/* Variants */
.default {
  @apply text-[12px] min-h-[22px] rounded-full bg-gray-100 border items-center text-slate-800;
}

.primary {
  @apply text-blue-500 bg-blue-50;
}

.error {
  @apply text-red-700 bg-red-50;
}

.warning {
  @apply text-warning-500 bg-warning-50;
}

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

.blueGray {
  @apply text-indigo-900 bg-slate-50;
}

.grayGreen {
  @apply text-success-600 bg-gray-50;
}


.blueLight {
  @apply text-sky-700 bg-sky-50;
}

.blue {
  @apply text-blue-700 bg-blue-50;
}

.indigo {
  @apply text-indigo-700 bg-indigo-50;
}

.violet {
  @apply text-violet-700 bg-violet-50;
}

.pink {
  @apply text-pink-700 bg-pink-50;
}

.rose {
  @apply text-rose-700 bg-rose-50;
}

.orange {
  @apply text-orange-700 bg-orange-50;
}

.secondary {
  @apply text-gray-900 bg-gray-100 border-transparent hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80;
}

.destructive {
  @apply bg-red-500 border-transparent text-gray-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/80;
}

.outline {
  @apply text-gray-950 dark:text-gray-50;
}

/* Sizes */
.sm {
  @apply min-h-[22px];
}

.md {
  @apply min-h-[24px];
}

.lg {
  @apply min-h-[28px];
}

/* Icon */
.leftIcon {
  @apply !pl-1 gap-1;
}
.rightIcon {
  @apply !pr-1 gap-1;
}
.close {
  @apply gap-1 cursor-pointer pointer-events-auto;
}