.fi-ta-header-cell {
    @apply px-3 py-3.5 text-start text-sm font-semibold text-gray-950 sm:first-of-type:ps-6 sm:last-of-type:pe-6 dark:text-white;

    &.fi-growable {
        @apply w-full;
    }

    &.fi-grouped {
        @apply border-gray-200 dark:border-white/5 [&:not(:first-of-type)]:border-s [&:not(:last-of-type)]:border-e;
    }

    &.fi-align-center {
        @apply text-center;

        & .fi-ta-header-cell-sort-btn {
            @apply justify-center;
        }
    }

    &.fi-align-end {
        @apply text-end;

        & .fi-ta-header-cell-sort-btn {
            @apply justify-end;
        }
    }

    &.fi-align-left {
        @apply text-left;

        & .fi-ta-header-cell-sort-btn {
            @apply justify-start rtl:flex-row-reverse;
        }
    }

    &.fi-align-right {
        @apply text-right;

        & .fi-ta-header-cell-sort-btn {
            @apply justify-end rtl:flex-row-reverse;
        }
    }

    &.fi-align-justify,
    &.fi-align-between {
        @apply text-justify;

        & .fi-ta-header-cell-sort-btn {
            @apply justify-between;
        }
    }

    &.fi-ta-header-cell-sorted {
        & .fi-icon {
            @apply text-gray-950 dark:text-white;
        }
    }

    &:not(.fi-ta-header-cell-sorted) {
        & .fi-icon {
            @apply text-gray-400 dark:text-gray-500;
        }

        & .fi-ta-header-cell-sort-btn:hover {
            & .fi-icon {
                @apply text-gray-500 dark:text-gray-400;
            }
        }

        & .fi-ta-header-cell-sort-btn:focus-visible {
            & .fi-icon {
                @apply text-gray-500 dark:text-gray-400;
            }
        }
    }

    &.sm\:fi-hidden {
        @apply sm:hidden;
    }

    &.md\:fi-hidden {
        @apply md:hidden;
    }

    &.lg\:fi-hidden {
        @apply lg:hidden;
    }

    &.xl\:fi-hidden {
        @apply xl:hidden;
    }

    &.\32xl\:fi-hidden {
        @apply 2xl:hidden;
    }

    &.sm\:fi-visible {
        @apply hidden sm:table-cell;
    }

    &.md\:fi-visible {
        @apply hidden md:table-cell;
    }

    &.lg\:fi-visible {
        @apply hidden lg:table-cell;
    }

    &.xl\:fi-visible {
        @apply hidden xl:table-cell;
    }

    &.\32xl\:fi-visible {
        @apply hidden 2xl:table-cell;
    }

    &.fi-wrapped {
        @apply whitespace-normal;
    }

    &:not(.fi-wrapped) {
        @apply whitespace-nowrap;
    }

    & .fi-ta-header-cell-sort-btn {
        @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 flex w-full cursor-pointer appearance-none items-center justify-start gap-x-1 rounded-md border-0 bg-transparent p-0 text-start outline-none focus-visible:ring-2;

        /* The user agent stylesheet sets `text-transform: none` on form controls, and preflight only restores `font`, `letter-spacing`, and `color` inheritance — so without this, styling applied to the header cell reaches the plain label but not the sortable button. */
        text-transform: inherit;
    }

    & .fi-icon {
        @apply shrink-0 transition duration-75;
    }

    & .fi-loading-indicator {
        @apply text-gray-400 dark:text-gray-500;
    }
}

.fi-ta-header-group-cell {
    @apply border-gray-200 px-3 py-2 text-sm font-semibold text-gray-950 sm:first-of-type:ps-6 sm:last-of-type:pe-6 dark:border-white/5 dark:text-white [&:not(:first-of-type)]:border-s [&:not(:last-of-type)]:border-e;

    &.fi-align-start {
        @apply text-start;
    }

    &.fi-align-center {
        @apply text-center;
    }

    &.fi-align-end {
        @apply text-end;
    }

    &.fi-align-left {
        @apply text-left;
    }

    &.fi-align-right {
        @apply text-right;
    }

    &.fi-align-justify,
    &.fi-align-between {
        @apply text-justify;
    }

    &.sm\:fi-hidden {
        @apply sm:hidden;
    }

    &.md\:fi-hidden {
        @apply md:hidden;
    }

    &.lg\:fi-hidden {
        @apply lg:hidden;
    }

    &.xl\:fi-hidden {
        @apply xl:hidden;
    }

    &.\32xl\:fi-hidden {
        @apply 2xl:hidden;
    }

    &.sm\:fi-visible {
        @apply hidden sm:table-cell;
    }

    &.md\:fi-visible {
        @apply hidden md:table-cell;
    }

    &.lg\:fi-visible {
        @apply hidden lg:table-cell;
    }

    &.xl\:fi-visible {
        @apply hidden xl:table-cell;
    }

    &.\32xl\:fi-visible {
        @apply hidden 2xl:table-cell;
    }

    &.fi-wrapped {
        @apply whitespace-normal;
    }

    &:not(.fi-wrapped) {
        @apply whitespace-nowrap;
    }
}

.fi-ta-empty-header-cell {
    @apply w-1;
}
