@reference "tailwindcss";

.pagy {
  @apply flex flex-wrap items-center justify-center gap-1.5 text-sm font-medium;

  a:not(.gap) {
    @apply inline-flex items-center justify-center min-w-10 h-10 px-3.5 rounded-lg border border-gray-200 bg-white text-gray-700 transition-colors hover:bg-gray-100 hover:text-primary-700 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white;

    &:not([href]) {
      /* disabled links */
      @apply text-gray-300 bg-gray-50 border-gray-200 cursor-not-allowed hover:bg-gray-50 hover:text-gray-300 dark:bg-gray-800 dark:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-600;
    }

    &.current {
      @apply text-white bg-primary-700 border-primary-700 hover:bg-primary-800 hover:text-white focus:ring-primary-300 dark:bg-primary-600 dark:border-primary-600 dark:hover:bg-primary-700;
    }
  }

  .gap {
    @apply inline-flex items-center justify-center min-w-10 h-10 px-2 text-gray-400 select-none;
  }

  label {
    @apply inline-flex items-center gap-2 whitespace-nowrap text-gray-700 bg-white border border-gray-200 rounded-lg px-3 h-10 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400;

    input {
      @apply bg-gray-50 border border-gray-200 rounded-md text-sm px-2 py-1 focus:ring-2 focus:ring-primary-300 focus:border-primary-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:text-white;
    }
  }
}