@layer components {
  .badge {
    @apply rounded-lg font-medium px-2 py-1 text-xs;
  }

  .badge-gray {
    @apply bg-neutral-100 text-neutral-800 dark:bg-neutral-500/20 dark:text-neutral-200;
  }

  .badge-red {
    @apply bg-red-100 text-red-800 dark:bg-red-500/20 dark:text-red-300;
  }

  .badge-orange {
    @apply bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-300;
  }

  .badge-yellow {
    @rounded text-yellow-700 dark:text-yellow-300 dark:bg-yellow-500/20;
  }

  .badge-green {
    @apply bg-green-100 text-green-800  dark:text-green-300 dark:bg-green-500/20;
  }

  .badge-blue {
    @apply bg-blue-100 text-blue-800 dark:text-blue-300 dark:bg-blue-500/20;
  }

  .badge-purple {
    @apply bg-purple-100 text-purple-800 dark:text-purple-300 dark:bg-purple-500/20;
  }

  .badge-indigo {
    @apply bg-indigo-100 text-indigo-800 dark:text-indigo-300 dark:bg-indigo-500/20;
  }

  .badge-pink {
    @apply bg-pink-100 text-pink-800 dark:text-pink-300 dark:bg-pink-500/20;
  }

  .badge-white {
    @apply bg-white text-gray-800 dark:text-gray-200 dark:bg-gray-500/20;
  }
}