@utility tabs-* {
    [role="tab"] {
        &.active {
            color: --value(--color-*);
            border-color: --value(--color-*);

            @variant dark {
                color: --value(--color-*-500);
                border-color: --value(--color-*-500);
            }
        }
    }

    &.tabs-pills {
        [role="tab"] {
            &.active {
                background-color: --value(--color-*);
                color: --value(--color-bg-*);

                @variant dark {
                    background-color: --value(--color-*-500);
                }
            }
        }
    }
}

@layer components {
    .tabs-nav {
        @apply flex flex-wrap;
        @apply text-sm font-medium;
        @apply text-gray-500 dark:text-gray-400;
        @apply border-b border-gray-200 dark:border-gray-700;
        @apply mb-2;
        @apply space-x-2 rtl:space-x-reverse;
    }

    [role="tab"] {
        @apply px-2.5 py-1.5 text-sm font-medium border-b-2 focus:outline-none;
        @apply border-transparent text-gray-500;
        @apply transition-colors;

        &.active {
            @apply border-primary text-primary dark:border-primary-500 dark:text-primary-500;
        }
    }

    .tabs-container {
        @apply relative;
    }

    [role="tabpanel"] {
        @apply animate-fade-in;

        &:not(.active) {
            @apply hidden;
        }
    }

    [role="tablist"] {
        @apply relative;

        &.tabs-pills {
            .tabs-nav {
                @apply pb-2;
            }

            [role="tab"] {
                @apply border-0 rounded-full;

                &.active {
                    @apply bg-primary dark:bg-primary-500 text-white;
                }
            }
        }

        &.tabs-vertical {
            @apply flex;

            .tabs-nav {
                @apply relative flex-col space-x-0 space-y-2 max-w-64;
                @apply border-b-0 border-e;
                @apply mb-0 me-2 pe-2;
            }

            [role="tab"] {
                @apply border-b-0 border-e-2 w-full;
            }
        }

        &.tabs-between {
            .tabs-nav {
                @apply justify-between;
            }
        }

        &.tabs-center {
            .tabs-nav {
                @apply justify-center;
            }
        }

        &.tabs-fill {
            .tabs-nav {
                @apply justify-stretch;
            }
        }
    }
}