@layer components {
    .badge {
        @apply inline-flex items-center rounded-full ring-1 ring-inset;
    }

    .badge-md {
        @apply px-2 py-1 text-xs font-medium;
    }

    .badge-sm {
        @apply px-1 py-0.5 font-normal;

        font-size: .75rem;
        line-height: .75rem;
    }

    .badge-gray {
        @apply bg-slate-100 text-slate-700 ring-[#2E282A]/50;
    }

    .badge-red {
        @apply bg-rose-50 text-[#E4572E] ring-[#E4572E]/50;
    }

    .badge-yellow {
        @apply bg-amber-50 text-[#FFC914] ring-[#FFC914]/50;
    }

    .badge-green {
        @apply bg-emerald-50 text-[#76B041] ring-[#76B041]/50;
    }

    .badge-orange {
        @apply bg-orange-50 text-[#E4572E] ring-[#E4572E]/50;
    }
}