@layer components {
    .pagination {
        @apply flex items-center gap-x-2;

        .pagination-items {
            @apply mx-2 flex items-center gap-x-2;

            .pagination-item {
                @apply border border-lightprimary;
            }
        }

        .pagination-item {
            @apply min-h-[38px] min-w-[38px] flex gap-2 justify-center items-center text-primary py-2 px-3 text-sm rounded-md transition-all duration-300;

            &:hover,
            &.pagination-item-active {
                @apply bg-primary text-secondary;
            }

            &.pagination-ellipsis:hover {
                @apply bg-transparent text-primary;
            }

            &.pagination-item-disabled {
                @apply opacity-50 pointer-events-none;
            }

            i {
                @apply text-sm leading-tight font-medium transition-all duration-300 relative;
            }

            &.pagination-next,
            &.pagination-previous {
                &:hover {
                    @apply bg-primary/10 text-primary;
                }

                span {
                    @apply hidden md:block;
                }
            }
        }
    }
}