.fi-pagination {
    @apply grid grid-cols-[1fr_auto_1fr] items-center gap-x-3;

    &:empty {
        @apply hidden;
    }

    & .fi-pagination-previous-btn {
        @apply justify-self-start;
    }

    & .fi-pagination-overview {
        @apply hidden text-sm font-medium text-gray-700 dark:text-gray-200;
    }

    & .fi-pagination-records-per-page-select-ctn {
        @apply col-start-2 justify-self-center;
    }

    & .fi-pagination-records-per-page-select {
        &:not(.fi-compact) {
            @apply hidden;
        }
    }

    & .fi-pagination-next-btn {
        @apply col-start-3 justify-self-end;
    }

    & .fi-pagination-items {
        @apply hidden justify-self-end rounded-lg bg-white shadow-sm ring-1 ring-gray-950/10 dark:bg-white/5 dark:ring-white/20;
    }

    & .fi-pagination-item {
        @apply border-x-[0.5px] border-gray-200 first:border-s-0 last:border-e-0 dark:border-white/10;

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

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

        &.fi-disabled {
            & .fi-pagination-item-label {
                @apply text-gray-500 dark:text-gray-400;
            }
        }
    }

    & .fi-pagination-item-btn {
        @apply relative flex overflow-hidden p-2 transition duration-75 outline-none;

        &:first-of-type {
            @apply rounded-s-lg;
        }

        &:last-of-type {
            @apply rounded-e-lg;
        }

        &:enabled {
            @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 hover:bg-gray-50 focus-visible:z-10 focus-visible:ring-2 dark:hover:bg-white/5;
        }

        &:hover {
            & .fi-icon {
                @apply text-gray-500 dark:text-gray-400;
            }
        }

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

        & .fi-pagination-item-label {
            @apply px-1.5 text-sm font-semibold text-gray-700 dark:text-gray-200;
        }
    }

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

        & .fi-pagination-records-per-page-select {
            &:not(.fi-compact) {
                @apply @md:inline;
            }

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

        &:not(.fi-simple) {
            & .fi-pagination-previous-btn,
            & .fi-pagination-next-btn {
                @apply @4xl:hidden;
            }
        }

        & .fi-pagination-overview {
            @apply @4xl:inline;
        }

        & .fi-pagination-items {
            @apply @4xl:flex;
        }
    }

    @supports not (container-type: inline-size) {
        & .fi-pagination-records-per-page-select {
            &:not(.fi-compact) {
                @apply sm:inline;
            }

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

        &:not(.fi-simple) {
            & .fi-pagination-previous-btn,
            & .fi-pagination-next-btn {
                @apply md:hidden;
            }
        }

        & .fi-pagination-overview {
            @apply md:inline;
        }

        & .fi-pagination-items {
            @apply md:flex;
        }
    }
}