$page-name: $lib-name + "-page";
$page-text-color: $content-color-light;
$page-active-color: $primary-color;
$page-border-color: $border-color-base;
$page-text-active-color: $title-color-dark;

.#{$page-name} {
  .#{$page-name}-simple,
  .#{$page-name}-normal {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    & > li {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-width: 28px;
      height: 28px;
      cursor: pointer;
      color: $page-text-color;
      border-radius: 2px;
      box-sizing: border-box;
      transition: all 0.2s ease-in-out;
      i {
        font-size: 12px;
      }
      &:hover {
        color: $page-active-color;
      }
    }
  }
  .#{$page-name}-simple {
    .#{$page-name}-simple-content {
      display: inline-flex;
      align-items: center;
      height: 28px;
      font-size: 12px;
      span {
        margin-right: 5px;
        color: $page-text-color;
      }
    }
  }
  .#{$page-name}-normal {
    &.small {
      li {
        border: none;
      }
    }
    font-size: 12px;
    .#{$page-name}-prev,
    .#{$page-name}-next {
      border: 1px solid $page-border-color;
      &:hover {
        border-color: $page-active-color;
      }
    }
    .#{$page-name}-prev {
      margin-right: 10px;
    }
    .number {
      margin-right: 10px;
      border: 1px solid $page-border-color;
      &.active {
        color: $page-text-active-color;
        background-color: $page-active-color;
        border-color: $page-active-color;
        &:hover {
          color: $page-text-active-color;
        }
      }
      &:hover {
        color: $page-active-color;
        border-color: $page-active-color;
      }
    }
    .data-show,
    .jump {
      cursor: default;
      &:hover {
        color: $page-text-color;
      }
    }
    .data-show {
      margin-right: 20px;
    }
    .jump {
      margin-left: 20px;
    }
    .sizer {
      & > div {
        width: auto;
        margin-left: 10px;
        .default-option-class {
          font-size: 12px;
        }
      }
      .trigger {
        display: flex;
        align-items: center;
        height: 28px;
        padding: 0 10px;
        border: 1px solid $page-border-color;
        box-sizing: border-box;
        border-radius: 2px;
        transition: all $transition-time ease-in-out;
        &:hover {
          color: $page-active-color;
          border-color: $page-active-color;
        }
        .arrow-down {
          margin-left: 5px;
          font-size: 12px;
          transition: transform $transition-time;
        }
        .arrow-down.reverse {
          transform: rotateZ(180deg);
        }
      }
    }
  }
  .#{$page-name}-disabled {
    cursor: not-allowed !important;
    color: lighten($page-text-color, 40%) !important;
    border-color: $page-border-color !important;
  }
  .page-input {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    color: $page-text-color;
    margin: 0 10px;
    padding: 0 3px;
    border: 1px solid $page-border-color;
    border-radius: 2px;
    box-sizing: border-box;
    outline: none;
    &:focus {
      border-color: $page-active-color;
    }
  }
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}