/* 
   Add the following markup AFTER your import statements
   Notice: this style contains only the rules for pagy-nav
*/

.pagy {
    @apply flex space-x-1 font-semibold text-sm text-gray-500 ;
    a:not(.gap) {
        @apply block rounded-lg px-3 py-1 bg-white text-gray-900 border border-gray-300 hover:bg-gray-50;
        &:focus {
            @apply focus:z-20 focus:outline-offset-0 ring-1 ring-inset ring-gray-300;
        }
        &:not([href]) { /* disabled links */
            @apply text-gray-400 bg-gray-100 cursor-not-allowed;
        }
    }
    a.current { /* this replaces .page.active in your context */
        @apply text-white bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
    }
    .page.next a, .page.prev a {
        @apply relative inline-flex items-center px-2 py-2;
    }
    .page.next a {
        @apply rounded-r-md;
    }
    .page.prev a {
        @apply rounded-l-md;
    }
    .page.next.disabled, .page.prev.disabled {
        @apply text-gray-400 bg-gray-100;
    }
    label {
        @apply inline-block whitespace-nowrap bg-white rounded-lg px-3 py-0.5;
        input {
            @apply bg-gray-100 border-none rounded-md;
        }
    }
}