.fi-fo-table-repeater {
    @apply grid gap-3 p-2;

    scrollbar-width: thin;
    scrollbar-color: rgb(156 163 175) transparent;

    &::-webkit-scrollbar {
        height: 8px;
    }

    &::-webkit-scrollbar-track {
        @apply bg-gray-100 dark:bg-gray-800;
    }

    &::-webkit-scrollbar-thumb {
        @apply bg-gray-400 rounded dark:bg-gray-600;
    }

    &::-webkit-scrollbar-thumb:hover {
        @apply bg-gray-500 dark:bg-gray-500;
    }

    & > table {
        @apply block w-full bg-white divide-y divide-gray-200 shadow-sm rounded-xl ring-1 ring-gray-950/5 dark:divide-white/10 dark:bg-gray-900 dark:ring-white/10;

        & > thead {
            @apply hidden whitespace-nowrap;

            & > tr {
                & > th {
                    @apply border-gray-200 bg-gray-50 px-3 py-2 text-sm font-semibold text-gray-950 first-of-type:rounded-tl-xl last-of-type:rounded-tr-xl dark:border-white/5 dark:bg-white/5 dark:text-white [&:not(:first-of-type)]:border-s [&:not(:last-of-type)]:border-e;

                    &.fi-resizable-column {
                        @apply relative;
                    }

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

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

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

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

                    &.fi-fo-table-repeater-empty-header-cell {
                        @apply w-1;
                    }
                }
            }
        }

        & .fi-fo-table-repeater-header-content {
            @apply flex items-center gap-1 overflow-hidden;
        }

        & .fi-fo-table-repeater-resize-handle {
            @apply absolute top-0 right-0 w-1 h-full cursor-col-resize select-none;
            @apply bg-transparent transition-colors duration-150;

            &:hover {
                background-color: color-mix(in srgb, var(--color-gray-400) 50%, transparent);
            }

            &:active {
                background-color: color-mix(in srgb, var(--color-gray-500) 70%, transparent);
            }
        }

        & > tbody {
            @apply block divide-y divide-gray-200 dark:divide-white/5;

            & > tr {
                @apply grid gap-6 p-6;

                    &.fi-hidden {
                        @apply hidden;
                    }
            }
        }

        & .fi-fo-table-repeater-header-required-mark {
            @apply font-medium text-red-600 dark:text-red-400;
        }

        & .fi-fo-table-repeater-actions {
            @apply flex items-center h-full gap-x-3;
        }
    }

    @supports (container-type: inline-size) {
        @apply @container;

        & > table {
            @apply @xl:table table-fixed;

            & > thead {
                @apply @xl:table-header-group;
            }

            & > tbody {
                @apply @xl:table-row-group;

                & > tr {
                    @apply @xl:table-row @xl:p-0;

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

                        & .fi-fo-field {
                            @apply @xl:gap-y-0;
                        }

                        & .fi-in-entry {
                            @apply @xl:gap-y-0;
                        }

                        & .fi-fo-field-label-content {
                            @apply @xl:hidden;
                        }

                        & .fi-in-entry-label-content {
                            @apply @xl:hidden;
                        }
                }
            }

            & .fi-fo-table-repeater-actions {
                @apply @xl:px-3 @xl:py-2;
            }
        }
         &.fo-compact {
            & > table {
                & > tbody {
                    & > tr {
                        & > td {
                            @apply @xl:border-gray-200 @xl:px-0 @xl:py-1 @xl:dark:border-white/5 @xl:[&:not(:first-of-type)]:border-s @xl:[&:not(:last-of-type)]:border-e;
                        }
                    }
                }
            }

            & .fi-input-wrp {
                @apply @xl:bg-transparent! @xl:shadow-none @xl:ring-0!;
            }

            & .fi-fo-field-wrp-error-message {
                @apply @xl:px-3 @xl:pb-2;
            }

            & .fi-in-entry-content {
                @apply @xl:px-3;
            }
        }
    }

    @supports not (container-type: inline-size) {
        & > table {
            @apply lg:table;

            & > thead {
                @apply lg:table-header-group;
            }

            & > tbody {
                @apply lg:table-row-group;

                & > tr {
                    @apply lg:table-row lg:p-0;

                    & > td {
                        @apply lg:table-cell lg:px-3 lg:py-2;

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

                        & .fi-fo-field {
                            @apply lg:gap-y-0;
                        }

                        & .fi-in-entry {
                            @apply lg:gap-y-0;
                        }

                        & .fi-fo-field-label-content {
                            @apply lg:hidden;
                        }

                        & .fi-in-entry-label-content {
                            @apply lg:hidden;
                        }
                    }
                }
            }

            & .fi-fo-table-repeater-actions {
                @apply lg:px-3 lg:py-2;
            }
        }
        &.fo-compact {
            & > table {
                & > tbody {
                    & > tr {
                        & > td {
                            @apply lg:border-gray-200 lg:px-0 lg:py-1 lg:dark:border-white/5 lg:[&:not(:first-of-type)]:border-s lg:[&:not(:last-of-type)]:border-e;
                        }
                    }
                }
            }

            & .fi-input-wrp {
                @apply lg:bg-transparent! lg:shadow-none lg:ring-0!;
            }

            & .fi-fo-field-wrp-error-message {
                @apply lg:px-3 lg:pb-2;
            }

            & .fi-in-entry-content {
                @apply lg:px-3;
            }
        }
    }

    & .fi-fo-table-repeater-add {
        @apply flex justify-center w-full;

        &.fi-align-start,
        &.fi-align-left {
            @apply justify-start;
        }

        &.fi-align-end,
        &.fi-align-right { 
            @apply justify-end;
        }
    }
}