@layer components {
  .pagination > li > a,
  .pagination > li > span {
    @apply tw-bg-white tw-border-neutral-200 tw-text-neutral-700;
  }

  .pagination > li > a:hover,
  .pagination > li > span:hover,
  .pagination > li > a:focus,
  .pagination > li > span:focus {
    @apply tw-bg-neutral-50 tw-text-neutral-600 tw-border-neutral-200;
  }

  .pagination > .active > a,
  .pagination > .active > span,
  .pagination > .active > a:hover,
  .pagination > .active > span:hover,
  .pagination > .active > a:focus,
  .pagination > .active > span:focus {
    @apply tw-bg-primary-600 tw-text-white tw-border-primary-600;
  }

  .pagination > .disabled > span,
  .pagination > .disabled > span:hover,
  .pagination > .disabled > span:focus,
  .pagination > .disabled > a,
  .pagination > .disabled > a:hover,
  .pagination > .disabled > a:focus {
    @apply tw-bg-white tw-border-neutral-200 tw-text-neutral-400;
  }
}