@use 'button';

$font-family: var(
  --wds-font-family-default,
  var(
    --wsr-font-family,
    Madefor,
    'Helvetica Neue',
    Helvetica,
    Arial,
    'メイリオ',
    'meiryo',
    'ヒラギノ角ゴ pro w3',
    'hiragino kaku gothic pro',
    sans-serif
  )
);
$padding-vertical: var(
  --wds-pagination-padding-vertical,
  var(--wds-space-50, 3px)
);
$button-size: var(--wds-button-size-small, var(--wds-space-500, 30px));
$button-border-radius: var(
  --wds-button-border-radius-small,
  var(--wds-border-radius-full, 50%)
);
$fill-hover: var(
  --wds-pagination-fill-hover,
  var(--wds-color-fill-standard-primary-hover, var(--wsr-color-B20, #5999ff))
);
$fill-active: var(
  --wds-pagination-fill-active,
  var(--wds-color-fill-standard-primary, var(--wsr-color-B10, #116dff))
);
$arrow-fill: var(
  --wds-pagination-arrow-fill,
  var(--wds-color-text-primary, var(--wsr-color-B20, #5999ff))
);

.pagination {
  &__nav {
    display: inline-flex;
    /* stylelint-disable-next-line plugin/use-baseline */
    user-select: none;
  }

  &__nav-button {
    display: inline-flex;
    flex-shrink: 0;
  }

  &__nav-button:not(#{&}__nav-button--disabled) {
    cursor: pointer;
  }

  &__empty-button {
    display: inline-flex;
    flex-shrink: 0;
  }

  &__nav-button--position-first {
    order: 1;
  }

  &__nav-button--position-previous,
  &__empty-button--position-previous {
    order: 2;
  }

  &__nav-button--position-next,
  &__empty-button--position-next {
    order: 4;
  }

  &__nav-button--position-last {
    order: 5;
  }

  &__page-strip {
    order: 3;
    overflow-x: hidden;
  }

  &__page-strip-inner {
    display: flex;
  }

  &__page-strip-template {
    height: 0;
    overflow: hidden;
  }

  &__page-button {
    display: inline-flex;
    flex-shrink: 0;
  }

  &__page-button:not(#{&}__page-button--disabled) {
    cursor: pointer;
  }

  &__current-page {
    display: inline-flex;
    flex-shrink: 0;
  }

  &__gap {
    display: inline-flex;
    flex-shrink: 0;
  }

  &__page-form {
    display: flex;
    order: 3;
  }

  &__compact {
    display: flex;
    order: 3;
  }

  & &__core &__page-button:focus-visible,
  & &__core &__nav-button:focus-visible {
    border-radius: $button-border-radius;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(
      --wds-outline-focus-outer,
      3px solid var(--wsr-color-B10, #116dff)
    );
    outline-offset: 1px;
  }

  & &__core &__page-button:focus-visible::before,
  & &__core &__nav-button:focus-visible::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(
      --wds-outline-focus-inner,
      1px solid var(--wsr-color-D80, #ffffff)
    );
  }

  &__core &__page-button,
  &__core &__current-page,
  &__core &__nav-button,
  &__core &__empty-button,
  &__core &__gap {
    @include button.common(
      $padding-vertical,
      $button-size,
      $button-border-radius
    );

    font-family: $font-family;
    font-size: var(
      --wds-font-size-body-small,
      var(--wsr-text-font-size-small, 14px)
    );
    font-weight: var(
      --wds-font-weight-regular,
      var(--wsr-font-weight-regular, 400)
    );
    line-height: var(
      --wds-font-line-height-body-small,
      var(--wsr-text-line-height-small, 18px)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    align-items: center;
    justify-content: center;
  }

  &__core &__page-button {
    color: var(
      --wds-color-text-standard-primary,
      var(--wsr-color-D10, #000624)
    );
    text-decoration: none;
  }

  @media (hover: hover) {
    &__core &__page-button:hover,
    &__core &__nav-button:hover {
      color: var(
        --wds-color-text-standard-primary-light,
        var(--wsr-color-D80, #ffffff)
      );
      background-color: $fill-hover;
    }
  }

  &__core &__page-button:focus,
  &__core &__nav-button:focus {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
  }

  &__core &__current-page {
    background-color: $fill-active;
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
  }

  &__core &__nav-button {
    color: $arrow-fill;
  }

  &__core &__gap {
    color: var(
      --wds-color-text-standard-primary,
      var(--wsr-color-D10, #000624)
    );
  }

  :global([dir='rtl']) &__arrow {
    transform: scaleX(-1);
  }
}