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

@layer base {
  html,
  body {
    @apply overflow-hidden;
  }
}

@layer components {
  .pagination-button {
    @apply rounded-md py-2 px-3 text-center text-sm transition-all shadow-sm hover:shadow-lg disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-1 cursor-pointer border border-slate-300 text-slate-600 hover:text-white hover:bg-slate-800 hover:border-slate-800 focus:text-white focus:bg-slate-800 focus:border-slate-800 active:border-slate-800 active:text-white active:bg-slate-800;
  }
  .pagination {
    .previous_page {
      @apply pagination-button;
    }
    .next_page {
      @apply pagination-button;
    }
    .disabled {
      @apply cursor-not-allowed hover:bg-inherit hover:text-slate-600 hover:border-slate-300 hover:shadow-sm opacity-50;
    }
    .current {
      @apply pagination-button min-w-9 bg-slate-800 border border-transparent text-white shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none;
    }
    a {
      @apply pagination-button;
    }
  }
}