.fi-tabs {
    @apply flex max-w-full gap-x-1 overflow-x-auto;

    &.fi-contained {
        @apply border-b border-gray-200 px-3 py-2.5 dark:border-white/10;
    }

    &:not(.fi-contained) {
        @apply mx-auto rounded-xl bg-white p-2 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
    }

    &.fi-vertical {
        @apply flex-col gap-x-0 gap-y-1 overflow-x-hidden overflow-y-auto;

        &.fi-contained {
            @apply border-e border-b-0;
        }

        &:not(.fi-contained) {
            @apply mx-0;
        }

        & .fi-tabs-item {
            @apply justify-start;
        }
    }
}

.fi-tabs-item {
    @apply flex items-center justify-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium whitespace-nowrap transition duration-75 outline-none hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;

    &.fi-active {
        @apply bg-gray-50 dark:bg-white/5;

        & .fi-tabs-item-label,
        & .fi-icon {
            @apply text-primary-700 dark:text-primary-400;
        }
    }

    :not(.fi-active) {
        &:hover {
            & .fi-tabs-item-label {
                @apply text-gray-700 group-focus-visible:text-gray-700 dark:text-gray-200 dark:group-focus-visible:text-gray-200;
            }
        }

        &:focus-visible {
            & .fi-tabs-item-label {
                @apply text-gray-700 dark:text-gray-200;
            }
        }
    }

    & .fi-tabs-item-label {
        @apply text-gray-500 transition duration-75 dark:text-gray-400;
    }

    & .fi-icon {
        @apply shrink-0 text-gray-400 transition duration-75 dark:text-gray-500;
    }

    & .fi-badge {
        @apply w-max;
    }
}