@use 'sass:math';
@use 'global/common' as global;

/* ------------------------------
 ページャー
------------------------------- */
.acms-pager {
  display: inline-block;
  padding: 0;
  margin-right: 10px;
  margin-left: 10px;
  color: global.$acms-color-black;
  list-style: none;

  @include global.font-size(13);
  @include global.clearfix;

  // ページ
  li {
    float: left;
    margin-left: 4px;
    text-align: center;

    // 最初の1件
    &:first-child {
      margin-left: 0;
    }

    // リンク
    > a:link {
      text-decoration: none;
    }

    // ページの見栄え
    span > a,
    &.cur span,
    &.cur button,
    > a,
    > button {
      @include global.button-shape;
      @include global.button-decoration;

      & {
        padding: 14px;
        color: global.$acms-color-black;
      }
    }

    &.cur span,
    &.cur button {
      text-decoration: none;
      background-color: global.$acms-color-gray30;
      border: 1px solid global.$acms-btn-active-border-color;
    }

    // active
    > a:active,
    > button:active {
      background-color: global.$acms-color-gray50;
      border: 1px solid global.$acms-btn-active-border-color;
    }
  }
}

// デスクトップ対応
@media (min-width: global.$breakpoint-md-min) {
  .acms-pager {
    margin-right: 0;
    margin-left: 0;

    // ページ
    li {
      span > a,
      &.cur span,
      &.cur button,
      > a,
      > button {
        @include global.button-shape(
          $padding: (
            math.div(global.$acms-form-height - global.$acms-btn-font-size-desktop - 2px, 2),
          )
          global.$acms-btn-padding-x
        );
      }
    }
  }
}
