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

.pagy a:not(.gap) {
  @apply relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0;

  &:not([href]) {
    /* disabled links */
    @apply text-gray-300 bg-gray-100 cursor-default;
  }

  &.current {
    @apply relative z-10 inline-flex items-center px-4 py-2 text-sm font-semibold text-white bg-primary-600 focus:z-20 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600;
  }

  &:first-child {
    @apply text-gray-400 rounded-l-md;
  }

  &:last-child {
    @apply text-gray-400 rounded-r-md;
  }

}

.pagy .gap {
  @apply relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-gray-100 cursor-default ring-1 ring-inset ring-gray-300;
}

.pagy label {
  @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;

  input {
    @apply bg-gray-100 border-none rounded-md;
  }
}

.pagy.info {
  @apply text-sm;
}