.fi-ta-ctn {
    @apply divide-y divide-gray-200 overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:divide-white/10 dark:bg-gray-900 dark:ring-white/10;

    &.fi-loading {
        @apply animate-pulse;
    }

    & .fi-ta-header-ctn {
        @apply -mt-px;
    }

    & .fi-ta-header {
        @apply flex flex-col gap-3 p-4 sm:px-6;

        &.fi-ta-header-adaptive-actions-position {
            @apply sm:flex-row sm:items-center;

            & .fi-ta-actions {
                @apply sm:ms-auto;
            }

            &:not(:has(.fi-ta-header-heading)) {
                &:not(:has(.fi-ta-header-description)) {
                    & .fi-ta-actions {
                        @apply ms-auto;
                    }
                }
            }
        }

        & .fi-ta-header-heading {
            @apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
        }

        & .fi-ta-header-description {
            @apply mt-1 text-sm text-gray-600 dark:text-gray-400;
        }
    }

    & .fi-ta-header-toolbar {
        @apply flex flex-wrap items-center justify-between gap-4 border-t border-gray-200 px-4 py-3 sm:px-6 dark:border-white/10;

        & > * {
            @apply flex items-center gap-x-4;
        }

        & > :nth-child(1) {
            @apply shrink-0;
        }

        & > :nth-child(2) {
            @apply ms-auto;
        }

        & .fi-ta-grouping-settings {
            & .fi-dropdown {
                &.sm\:fi-hidden {
                    @apply sm:hidden;
                }

                & .fi-ta-grouping-settings-fields {
                    @apply grid gap-y-6 p-6;

                    & label {
                        @apply grid gap-y-2 text-sm leading-6 font-medium text-gray-950 dark:text-white;
                    }
                }
            }

            & > .fi-ta-grouping-settings-fields {
                @apply hidden items-center gap-x-3 sm:flex;
            }
        }

        & .fi-ta-filters-dropdown {
            & .fi-ta-filters {
                @apply p-6;
            }
        }

        & .fi-ta-col-manager-dropdown {
            & .fi-ta-col-manager {
                @apply p-6;
            }
        }
    }

    & .fi-ta-filters {
        @apply grid gap-y-4;

        &.fi-ta-filters-below-content {
            @apply p-4 sm:px-6;
        }

        & .fi-ta-filters-header {
            @apply flex items-center justify-between;

            & .fi-ta-filters-heading {
                @apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
            }

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

    & .fi-ta-filters-above-content-ctn {
        @apply grid border-t border-gray-200 px-4 py-4 sm:px-6 dark:border-white/10;

        & .fi-ta-filters-trigger-action-ctn {
            @apply ms-auto;
        }

        &.fi-open {
            & .fi-ta-filters-trigger-action-ctn {
                @apply mt-3;
            }

            &:has(.fi-ta-filters-apply-action-ctn) {
                & .fi-ta-filters-trigger-action-ctn {
                    @apply -mt-7;
                }
            }
        }
    }

    & .fi-ta-reorder-indicator {
        @apply flex gap-x-3 bg-gray-50 px-3 py-1.5 text-sm leading-6 font-medium text-gray-700 sm:px-6 dark:bg-white/5 dark:text-gray-200;

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

    & .fi-ta-selection-indicator {
        @apply flex flex-col justify-between gap-y-1 bg-gray-50 px-3 py-2 sm:flex-row sm:items-center sm:px-6 sm:py-1.5 dark:bg-white/5;

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

        & .fi-ta-selection-indicator-actions-ctn {
            @apply flex gap-x-3;
        }

        & > * {
            @apply flex gap-x-3;
        }

        & > :nth-child(1) {
            @apply text-sm leading-6 font-medium text-gray-700 dark:text-gray-200;
        }

        & > :nth-child(2) {
            @apply ms-auto;
        }
    }

    & .fi-ta-filter-indicators {
        @apply flex items-start justify-between gap-x-3 bg-gray-50 px-3 py-1.5 sm:px-6 dark:bg-white/5;

        & > :nth-child(1) {
            @apply flex flex-col gap-x-3 gap-y-1 sm:flex-row;

            & .fi-ta-filter-indicators-label {
                @apply text-sm leading-6 font-medium whitespace-nowrap text-gray-700 dark:text-gray-200;
            }

            & .fi-ta-filter-indicators-badges-ctn {
                @apply flex flex-wrap gap-1.5;
            }
        }

        & > :nth-child(2).fi-icon-btn {
            @apply -mt-1;
        }
    }

    & .fi-pagination {
        @apply px-3 py-3 sm:px-6;
    }

    & .fi-ta-table-loading-ctn {
        @apply flex h-32 items-center justify-center;
    }
}