@layer components {
  .pagination-buttons {
    > a,
    > div {
      @apply flex items-center justify-center font-medium rounded-full leading-none;
      @apply size-25 text-xs;
      @apply md:size-40 md:text-base;
    }

    > a {
      &:not(.is-active) {
        @apply hover:bg-gray-200;
      }
      &.is-active {
        @apply text-white bg-blue-900;

        @media (forced-colors: active) {
          @apply border-2 border-[ButtonText];
        }
      }
    }
  }
}