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

/*

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

*/

@layer components {
  .paginate-page {
    @apply relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
  }
  
  .paginate-prev-page,
  .paginate-next-page,
  .paginate-first-page,
  .paginate-last-page {
    @apply px-2
  }
  .paginate-page--current {
    @apply bg-gray-100;
  }
  .paginate-first-page {
    @apply rounded-l-md;
  }
  .paginate-last-page {
    @apply rounded-r-md;
  }
  .paginate-page-single {
    @apply rounded-md text-gray-700 hover:text-gray-500;
  }
}