/* app/assets/stylesheets/components/badges.css */

.badge {
  @apply inline-flex items-center gap-1.5 rounded-md px-2.5 py-1
         text-xs font-semibold leading-none whitespace-nowrap
         align-middle min-h-6 border border-transparent;
}

.badge-small {
  @apply min-h-5 px-2 py-0.5 text-[11px];
}

.badge-large {
  @apply min-h-7 px-3 py-1.5 text-sm;
}

.badge-pill {
  @apply rounded-full;
}

.badge-soft {
  @apply shadow-none;
}

.badge-blue {
  @apply bg-blue-600 border-blue-600 text-white;
}

.badge-green {
  @apply bg-green-600 border-green-600 text-white;
}

.badge-gray {
  @apply bg-gray-600 border-gray-600 text-white;
}

.badge-yellow {
  @apply bg-yellow-500 border-yellow-500 text-white;
}

.badge-orange {
  @apply bg-orange-600 border-orange-600 text-white;
}

.badge-purple {
  @apply bg-purple-600 border-purple-600 text-white;
}

.badge-red {
  @apply bg-red-600 border-red-600 text-white;
}

.badge-white {
  @apply bg-white border-gray-300 text-gray-700;
}

.badge-teal {
  @apply bg-teal-600 border-teal-600 text-white;
}

.badge-pink {
  @apply bg-pink-600 border-pink-600 text-white;
}

.badge-soft.badge-blue {
  @apply bg-blue-100 border-blue-200 text-blue-800;
}

.badge-soft.badge-green {
  @apply bg-green-100 border-green-200 text-green-800;
}

.badge-soft.badge-gray {
  @apply bg-gray-100 border-gray-200 text-gray-800;
}

.badge-soft.badge-yellow {
  @apply bg-yellow-100 border-yellow-200 text-yellow-800;
}

.badge-soft.badge-orange {
  @apply bg-orange-100 border-orange-200 text-orange-800;
}

.badge-soft.badge-purple {
  @apply bg-purple-100 border-purple-200 text-purple-800;
}

.badge-soft.badge-red {
  @apply bg-red-100 border-red-200 text-red-800;
}

.badge-soft.badge-white {
  @apply bg-gray-50 border-gray-200 text-gray-700;
}

.badge-soft.badge-teal {
  @apply bg-teal-100 border-teal-200 text-teal-800;
}

.badge-soft.badge-pink {
  @apply bg-pink-100 border-pink-200 text-pink-800;
}