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

/* ------------------------------
 ページャー
------------------------------- */
.acms-pager {
  display: inline-block;
  padding: 0;
  margin: 0;
  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(
        $font-size: global.$acms-btn-font-size,
        $padding: (
          math.div(global.$acms-form-height - global.$acms-btn-font-size - 2px, 2),
        )
        global.$acms-btn-padding-x
      );
      @include global.button-decoration(
        $border: 1px solid rgba(0, 0, 0, 0.2),
        $hover-bg-color: global.$acms-color-gray20,
        $hover-border-color: rgba(0, 0, 0, 0.3),
        $text-color: global.$acms-btn-default-color,
        $active-border-color: global.$acms-btn-active-border-color,
        $active-bg-color: global.$acms-color-gray40,
        $active-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3),
        $active-text-color: global.$acms-color-black,
        $focus-border-color: global.$acms-btn-focus-border-color,
        $focus-box-shadow: global.$acms-btn-focus-box-shadow
      );
    }

    &.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;
    }
  }
}
