@use '../abstract' as *;
.pagination {
  $button-size:   pxToRem(32);
  --button-size:  #{$button-size};

  display:flex; gap:pxToRem(20);

  &-list {
    display:flex; gap:pxToRem(8);
  }
  .button {
    flex-shrink:0; padding-inline:pxToRem(12);
    [class*="icon"] {
      transform: scaleX(var(--transform-direction));
      &::before { vertical-align:middle; }
    }

    /* adjust color from default button */
    &:where(:not(.is-text)) {
      --p-text-color-disabled: var(--color-neutral-90);
      #{$theme-dark} & {
        --p-text-color-disabled: var(--color-neutral-20);
      }
    }
  }

  /* states */
  &.is-center { justify-content:center;   }
  &.is-end    { justify-content:flex-end; }
}