@layer components {
    .badge {
        @apply text-xs rounded-full p-0.5 px-2 inline-block bg-white border border-gray-200 dark:bg-[#1a1a1a] dark:border-[#333] dark:text-gray-300;
    
    
        &.badge--warning{
            @apply text-amber-600 border-amber-600 dark:text-amber-400 dark:border-amber-400;
        }

        &.badge--danger{
            @apply text-red-600 border-red-600 dark:text-red-400 dark:border-red-400;
        }
    }
    .ltr {
        direction: ltr;
    }

    .box {
        @apply bg-white rounded-2xl p-5 border border-gray-200 dark:bg-[#1a1a1a] dark:border-[#2a2a2a];

        .box__title {
            @apply -m-5 p-3 px-5 mb-3 dark:border-[#333];

            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            font-weight: 700;
            @media (min-width: theme("screens.xl")) {
                @apply -m-5 mb-3;
            }
        }
    }

    .selectx {

        .selectx-items {
            @apply mt-2;
        }

        &.selectx--single {
            .selectx-items {
                @apply absolute m-0 inset-0;
                z-index: -1;
                &:not(:empty){
                    z-index: 8;
                }
                
                .tag {
                    @apply absolute inset-1;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}
