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

@layer base {
  [x-cloak] { display: none !important; }
}

@layer components {
  /* Navigation styles */
  nav.pagy {
    @apply isolate inline-flex -space-x-px rounded-md shadow-sm bg-white;

    /* Default link styles */
    a:not(.gap) {
      @apply relative inline-flex items-center px-4 py-2 text-sm font-semibold ring-1 ring-inset ring-gray-300;
    }

    /* First link (Previous) */
    a:first-child:not(.current) {
      @apply relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0;
    }

    /* Last link (Next) */
    a:last-child:not(.current) {
      @apply relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0;
    }

    /* Regular page links */
    a:not(:first-child):not(:last-child):not(.gap):not(.current) {
      @apply text-gray-900 hover:bg-gray-50 focus:z-20 focus:outline-offset-0;
    }

    /* Disabled links */
    a:not(.gap):not(.current):not([href]) {
      @apply text-gray-300 cursor-not-allowed bg-gray-50;
    }

    /* Current/active page */
    a.current {
      @apply relative z-10 inline-flex items-center bg-indigo-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 hover:bg-indigo-600;
    }

    /* Gap/ellipsis */
    .gap {
      @apply relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0;
    }
  }

  /* Info text styles */
  .pagy.info {
    @apply text-sm text-gray-700;
  }
}