@layer components {
  .pagy-nav.pagination {
    @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
  }

  .pagy-nav .page:not(.prev):not(.next) {
    @apply hidden sm:inline-block;
  }

  .pagy-nav .page.next a {
    @apply relative inline-flex items-center rounded-r-md border
           border-gray-300 bg-white px-3 py-2 text-sm font-medium
           text-gray-500 hover:bg-gray-100 focus:z-20;
  }

  .pagy-nav .page.prev a {
    @apply relative inline-flex items-center rounded-l-md border
           border-gray-300 bg-white px-3 py-2 text-sm font-medium
           text-gray-500 hover:bg-gray-100 focus:z-20;
  }

  .pagy-nav .page.next.disabled {
    @apply relative inline-flex items-center rounded-r-md border
           border-gray-300 bg-gray-100 px-3 py-2 text-sm font-medium
           text-gray-400 focus:z-20;
  }

  .pagy-nav .page.prev.disabled {
    @apply relative inline-flex items-center rounded-l-md border
           border-gray-300 bg-gray-100 px-3 py-2 text-sm font-medium
           text-gray-400 focus:z-20;
  }

  .pagy-nav .page a, .page.gap {
    @apply bg-white border-gray-300 text-gray-500 hover:bg-gray-100 relative
           inline-flex items-center border px-4 py-2 text-sm font-medium
           no-underline focus:z-20;
  }

  .pagy-nav .page.active {
    @apply z-10 border-indigo-500 bg-indigo-50 text-indigo-600 relative
           inline-flex items-center border px-4 py-2 text-sm font-medium
           focus:z-20;
  }
}