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

  .page.next a {
    @apply relative inline-flex items-center rounded-r-md border border-gray-700 bg-slate-950 px-2 py-2 text-sm font-medium text-slate-200 hover:bg-gray-600 focus:z-20;
  }

  .page.prev a {
    @apply relative inline-flex items-center rounded-l-md border border-gray-700 bg-slate-950 px-2 py-2 text-sm font-medium text-slate-200 hover:bg-gray-600 focus:z-20;
  }

  .page.next.disabled {
    @apply relative inline-flex items-center rounded-r-md border border-gray-700 bg-slate-800 px-2 py-2 text-sm font-medium text-slate-200 hover:bg-gray-600 focus:z-20;
  }

  .page.prev.disabled {
    @apply relative inline-flex items-center rounded-l-md border border-gray-700 bg-slate-800 px-2 py-2 text-sm font-medium text-slate-200 hover:bg-gray-600 focus:z-20;
  }

  .page a, .page.gap {
    @apply bg-slate-950 border-gray-700 text-slate-200 hover:bg-gray-600 relative inline-flex items-center border px-4 py-2 text-sm font-medium focus:z-20;
  }

  .page.active {
    @apply z-10 border-indigo-500 bg-gray-300 text-gray-900 relative inline-flex items-center border px-4 py-2 text-sm font-bold focus:z-20;
  }
}