.badge {
    @apply rounded-full text-xs flex items-center whitespace-nowrap px-2 py-0.5 space-x-1;

    &.default {
        @apply bg-gray-100 text-gray-500;
        @apply dark:bg-gray-500 dark:text-white;
    }

    &.success {
        @apply bg-green-500 text-white;
        @apply dark:bg-green-800 dark:text-white;
    }

    &.danger {
        @apply bg-red-500 text-white;
        @apply dark:bg-red-800 dark:text-white;
    }

    &.warning {
        @apply bg-orange-500 text-white;
    }

    &.info {
        @apply bg-blue-400 text-white;
        @apply dark:bg-blue-800 dark:text-white;
    }
}