@import "tailwindcss";

.pagy {
  @apply isolate inline-flex -space-x-px rounded-md shadow-xs;

  a, span {
    @apply relative inline-flex items-center px-4 py-2 text-sm font-semibold focus:z-20 focus:outline-offset-0 inset-ring inset-ring-gray-300 text-gray-900;
  }

  /* Default hover effect for non-current links */
  a:not(.current):hover {
    @apply bg-gray-50;
  }

  /* Disabled links (no href) */
  a:not([href]) {
    @apply text-gray-400 cursor-default;
  }

  /* Current (active) page */
  a.current, .current {
    @apply z-10 bg-blue-600 inset-ring inset-ring-blue-600 text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600;
  }

  /* Rounded edges for first/last buttons */
  a:first-child {
    @apply rounded-l-md px-4 py-2 text-gray-400;
  }

  a:last-child {
    @apply rounded-r-md px-4 py-2 text-gray-400;
  }

  /* Ellipsis gap */
  .gap {
    @apply relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 inset-ring inset-ring-gray-300;
  }
}