@layer components {
    .pagy.series-nav {
        @apply flex items-center justify-center gap-2;
    }

    .pagy.series-nav a,
    .pagy.series-nav span {
        @apply inline-flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-white/5 text-sm font-medium text-white/60 transition-colors cursor-pointer no-underline;
    }

    .pagy.series-nav a:hover:not([aria-disabled="true"]) {
        @apply border-[#3CC9C9]/60 bg-[#3CC9C9]/20 text-[#3CC9C9];
    }

    .pagy.series-nav a[aria-current="page"] {
        @apply border-[#3CC9C9]/60 bg-[#3CC9C9]/20 text-[#3CC9C9] font-bold ring-1 ring-[#3CC9C9]/30 cursor-default;
    }

    .pagy.series-nav span.gap {
        @apply border-transparent bg-transparent text-white/30 cursor-default;
    }

    .pagy.series-nav a[aria-disabled="true"] {
        @apply opacity-50 cursor-not-allowed hover:border-white/10 hover:bg-white/5 hover:text-white/60;
    }
}