@layer components {

    .tabs > ul > li,
    .tabs > ul {
        margin: 0;
    }
    .tabs__content > div {
        display: none;
    }
    .tabs__content > div.active {
        display: block;
        min-height: 100px;
    }

    .tabs .tab {
        @apply flex text-sm font-medium;
        @apply text-center text-gray-400 border-b border-gray-200 whitespace-nowrap overflow-x-auto dark:border-[#2a2a2a];

        .tab-item {
            @apply font-bold inline-block border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300;

            &:hover {
                @apply text-primary border-b-2 border-primary;
            }

            a {
                @apply !text-gray-900 inline-block p-4 dark:!text-gray-200;
            }

            &.active {
                @apply border-b-primary;

                a {
                    @apply !text-primary;
                }
            }

            &.tab-item--disabled {
                pointer-events: none;
                opacity: 0.7;
                filter: saturate(0.5);
            }
        }
    }
}
