@layer components {

    .badge-pill {
        @apply px-3 py-1 rounded-full inline-block w-auto;
    }

    .badge-pill-info {
        @apply text-white bg-blue-500;
    }

    .badge-pill-success {
        @apply text-white bg-green-500;
    }

    .badge-pill-danger {
        @apply text-white bg-red-500;
    }
    .badge-pill-primary {
        @apply text-white bg-custom-orange-500;
    }

    .badge-pill-tertiary {
        @apply text-white bg-custom-orange-300;
    }
}