@layer components {
    .pagy {
        /* Nav container */
        @apply isolate inline-flex -space-x-px rounded-md shadow-xs dark:shadow-none;

        /* ── Prev (first child) ────────────────────────────────────────────── */
        a:first-child {
            @apply relative inline-flex items-center rounded-l-md px-4 py-2
            text-gray-400 inset-ring inset-ring-gray-300
            hover:bg-gray-50 focus:z-20 focus:outline-offset-0
            dark:inset-ring-gray-700 dark:hover:bg-white/5;
        }

        /* ── Next (last child) ─────────────────────────────────────────────── */
        a:last-child {
            @apply relative inline-flex items-center rounded-r-md px-4 py-2
            text-gray-400 inset-ring inset-ring-gray-300
            hover:bg-gray-50 focus:z-20 focus:outline-offset-0
            dark:inset-ring-gray-700 dark:hover:bg-white/5;
        }

        /* ── Regular page numbers ──────────────────────────────────────────── */
        a:not(:first-child):not(:last-child):not([aria-current]):not([role="separator"]) {
            @apply relative inline-flex items-center px-4 py-2 text-sm font-semibold
            text-gray-900 inset-ring inset-ring-gray-300
            hover:bg-gray-50 focus:z-20 focus:outline-offset-0
            dark:text-gray-200 dark:inset-ring-gray-700 dark:hover:bg-white/5;
        }

        /* ── Current page ──────────────────────────────────────────────────── */
        a[aria-current] {
            @apply relative z-10 inline-flex items-center bg-indigo-600 px-4 py-2
            text-sm font-semibold text-white focus:z-20
            focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600
            dark:bg-indigo-500 dark:focus-visible:outline-indigo-500;
        }

        /* ── Gap / separator ───────────────────────────────────────────────── */
        a[role="separator"] {
            @apply relative inline-flex items-center px-4 py-2 text-sm font-semibold
            text-gray-700 inset-ring inset-ring-gray-300 focus:outline-offset-0
            dark:text-gray-400 dark:inset-ring-gray-700 cursor-default;
        }

        /* ── Disabled prev / next (no href) ────────────────────────────────── */
        a:not([href]):not([role="separator"]) {
            @apply opacity-50 cursor-default pointer-events-none;
        }
    }
}