@tailwind base;
@tailwind components;
@tailwind utilities;

.pagy {
  @apply inline-flex items-stretch -space-x-px;
  a {
    @apply flex items-center justify-center text-sm py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400;
    &:hover {
      @apply hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white;
    }
    &:not([href]) {
      /* disabled links */
      @apply text-gray-300 bg-gray-100 cursor-not-allowed dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400;
    }
    &.current {
      @apply flex items-center justify-center text-sm z-10 py-2 px-3 leading-tight text-primary-600 bg-primary-50 border border-primary-300 hover:bg-primary-100 dark:border-gray-700 dark:bg-gray-700 dark:text-white;
    }
  }

  > *:first-child {
    @apply rounded-l-lg;
  }

  > *:last-child {
    @apply rounded-r-lg;
  }

  /*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;*/
  /*    }*/
  /*}*/
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-primary-200;
  }
}

*/