.fi-fo-repeater {
    @apply grid gap-y-4;

    & .fi-fo-repeater-actions {
        @apply flex gap-x-3;

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

    & .fi-fo-repeater-items {
        @apply items-start gap-4;
    }

    & .fi-fo-repeater-item {
        @apply divide-y divide-gray-100 rounded-xl bg-white shadow-xs ring-1 ring-gray-950/5 dark:divide-white/10 dark:bg-white/5 dark:ring-white/10;

        &.fi-collapsed {
            & .fi-fo-repeater-item-header-collapsible-actions {
                @apply -rotate-180;
            }

            & .fi-fo-repeater-item-header-collapse-action {
                @apply pointer-events-none opacity-0;
            }
        }

        &:not(.fi-collapsed) {
            & .fi-fo-repeater-item-header-expand-action {
                @apply pointer-events-none opacity-0;
            }
        }
    }

    & .fi-fo-repeater-item-header {
        @apply flex items-center gap-x-3 overflow-hidden px-4 py-3;
    }

    &.fi-collapsible {
        & .fi-fo-repeater-item-header {
            @apply cursor-pointer select-none;
        }
    }

    & .fi-fo-repeater-item-header-start-actions {
        @apply flex items-center gap-x-3;
    }

    & .fi-fo-repeater-item-header-icon {
        @apply text-gray-400 dark:text-gray-500;
    }

    & .fi-fo-repeater-item-header-label {
        @apply text-sm font-medium text-gray-950 dark:text-white;

        &.fi-truncated {
            @apply truncate;
        }
    }

    & .fi-fo-repeater-item-header-end-actions {
        @apply ms-auto flex items-center gap-x-3;
    }

    & .fi-fo-repeater-item-header-collapsible-actions {
        @apply relative transition;
    }

    & .fi-fo-repeater-item-header-collapse-action {
        @apply transition;
    }

    & .fi-fo-repeater-item-header-expand-action {
        @apply absolute inset-0 rotate-180 transition;
    }

    & .fi-fo-repeater-item-content {
        @apply p-4;
    }

    & .fi-fo-repeater-add-between-items-ctn {
        @apply flex w-full justify-center;
    }

    & .fi-fo-repeater-add-between-items {
        @apply rounded-lg bg-white dark:bg-gray-900;
    }

    & .fi-fo-repeater-label-between-items-ctn {
        @apply relative border-t border-gray-200 dark:border-white/10;
    }

    & .fi-fo-repeater-label-between-items {
        @apply absolute -top-3 left-3 px-1 text-sm font-medium;
    }

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

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

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

.fi-fo-simple-repeater {
    @apply grid gap-y-4;

    & .fi-fo-simple-repeater-items {
        @apply gap-4;
    }

    & .fi-fo-simple-repeater-item {
        @apply flex justify-start gap-x-3;
    }

    & .fi-fo-simple-repeater-item-content {
        @apply flex-1;
    }

    & .fi-fo-simple-repeater-item-actions {
        @apply flex items-center gap-x-1;
    }

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

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

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

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

    & > table {
        @apply block w-full divide-y divide-gray-200 rounded-xl bg-white shadow-sm 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-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;
                    }
                }
            }
        }

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

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

                & > td {
                    @apply block;

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

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

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

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

        & > table {
            @apply @xl:table;

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

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

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

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

                        &.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;
            }
        }
    }

    @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;
            }
        }
    }

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

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

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