.pages {
  @apply flex justify-center;
  .inner {
    @apply flex flex-wrap items-center p-0 m-0 list-none;
  }
  .text,
  .item {
    @apply inline-flex items-center justify-center relative outline-0 border-0 select-none align-middle appearance-none no-underline text-sm rounded-2xl text-center box-border min-w-[32px] h-8 py-0 px-1.5 mx-1;
  }
  .item {
    @apply cursor-pointer;
    @apply hover:bg-black hover:bg-opacity-5;

    &.selected {
      @apply text-white bg-blue-600 hover:bg-blue-800 hover:bg-opacity-100;
    }
    &.disabled {
      @apply cursor-default pointer-events-none opacity-40;
    }
    :global(.dark) & {
      @apply hover:bg-white hover:bg-opacity-10;

      &.selected {
        @apply text-white bg-blue-700 hover:bg-blue-800 hover:bg-opacity-100;
      }
    }
  }
  .icon {
    @apply select-none w-4 h-4 inline-block fill-current flex-shrink-0 text-xl -mx-2;
  }
}