@page-prefix-cls: ~"@{css-prefix}page";

.@{page-prefix-cls} {
  font-size: @font-size-middle;
  display: flex;
  &__title {
    margin-right: 18px;
    height: @height-middle;
    line-height: (@height-middle - 2px);
    font-size: @font-size-base;
  }

  &__opts {
    height: @height-middle;
    line-height: (@height-middle - 2px);
    font-size: @font-size-base;
    .haloe-select{
      margin: 0 8px;
      min-width: 50px;
      outline: none;
      &:focus-visible{
        border-color:@color-brand-primary !important;
      }
    }
  }
  &__list {
    margin-left: auto;
    display: flex;
    list-style: none;
    font-size: @font-size-middle;
  }

  &-item-jump-prev, &-item-jump-next {
    // &:after {
    //     content: "•••";
    //     display: block;
    //     letter-spacing: 1px;
    //     color: @color-complementary-22;
    //     text-align: center;
    // }
    i {
      color: @page-default-text-color;
    }
    i:first-child {
      display: none;
    }

    &:hover {
      //&:after{
      //    display: none;
      //}
      i:first-child {
        display: inline;
        // color: @primary-color;
      }
      i:last-child {
        display: none;
      }
    }
    &:active {
      i:first-child {
        color: @page-active-color;
      }
    }
  }

  &-item-jump-prev:hover {
      i:after {
          content: "\e771";
          margin-left: -8px;
      }
  }

  &-item-jump-next:hover {
      i:after {
          content: "\e783";
          margin-left: -8px;
      }
  }


  &-item-jump-prev,
  &-item-jump-next{
      margin-right: 4px;
  }

  &-prev,
  &-next,
  &-item-jump-prev,
  &-item-jump-next {
      display: inline-block;
      vertical-align: middle;
      user-select: none;
      min-width: @height-middle;
      height: @height-middle;
      line-height: (@height-middle - 2px);
      list-style: none;
      text-align: center;
      cursor: pointer;
      color: #666; // ★待定
      font-family: Arial;
      // border: 1px solid @color-border-normal1;
      border-radius: @btn-border-radius;
      transition: all @transition-time @ease-in-out;
  }
  &-item-jump-prev,
  &-item-jump-next{
      border-color: transparent;
  }

  &-prev{
    border-right: none;
    border-radius: @border-radius-base 0 0 @border-radius-base;
  }

  &-next{
    border-left: none;
    border-radius: 0 @border-radius-base @border-radius-base 0;
  }

  &-prev,
  &-next {
      background-color:@color-bg-card;
      position:relative;
      a {
        color: @page-default-arrow-color;
        font-size: 14px;
      }
      &:active {
        a {
          color: @page-active-arrow-color;
        }
      }
      &:hover {
        a {
          color: @page-hover-arrow-color;
        }
      }
  }

  &-disabled {
    cursor: @cursor-disabled;
    // background-color: @color-bg-disable;
    // background-color: @page-disabled-bg-color;
    margin-right: 1px;
    a {
      color: @page-disabled-arrow-color;
    }
    &:hover {
      border-color: @color-border-normal1;
      a {
        color: @page-disabled-arrow-color;
        cursor: @cursor-disabled;
      }
    }
  }

  &-item{
      margin-right: 4px;
      min-width: @height-middle;
      height: @height-middle;
      line-height: (@height-middle - 2px);
      // border: 1px solid @page-border-color;
      text-align: center;
      color: @page-default-text-color;
      border-radius: 0;
      cursor: pointer;
      a {
        color:inherit;
      }
      &:hover {
        // border-color: @color-brand-primary;
        // border: 1px solid @color-brand-primary !important;
        background-color: @page-hover-bg-color;
        border-radius: @border-radius-base;
        &:not(:nth-child(2)) {
          // margin-left: -1px;
        }
      }
      &:active a {
        color: @page-active-color;
      }

      & + & {
        border-left:none;
      }

      &-active {
        // border: 1px solid @color-brand-primary !important;
        margin-left: -1px;
        background-color: @page-active-bg-color;
        border-radius: @border-radius-base;
        a,
        &:hover a {
          color: @page-active-color;
          font-weight: 600;
        }
      }
  }

  &__jump{
    margin-left: 5px;
    vertical-align: middle;
    line-height: 32px;
    input {
      display: inline-block;
      width: 50px;
      height: @height-middle;
      margin: 0 8px;
      padding: 5px 8px;
      text-align: center;
      box-sizing: border-box;
      color: @page-default-text-color;
      background-color: @color-bg-card;
      outline: none;
      border: 1px solid @color-border-normal1;
      border-radius: @btn-border-radius;
      transition: border-color @transition-time @ease-in-out;
      vertical-align: top;
      &:hover {
          border-color: @color-brand-primary;
      }
    }
    &.is-small {
      line-height: 24px;
    }
    &__btn{
      margin: 0 8px;
      display: inline-block;
      height: @btn-height-base;
      width: 50px;
      height: @height-middle;
      line-height: (@height-middle - 2px);
      text-align: center;
      background-color: @color-functional-white;
      border-radius: @btn-border-radius;
      border: 1px solid @color-border-normal1;
      color: @color-text-level3;
      &:hover{
        border-color: @color-brand-primary;
        color: @color-brand-primary;
      }
    }
  }

  &-simple {
    align-items: center;
    // .haloe-select {
    //   width: 64px;
    // }
    
    input {
      display: inline-block;
      width: 42px;
      height: @height-middle;
      margin-right: 9.5px;
      padding: 5px 8px;
      text-align: center;
      box-sizing: border-box;
      color: @page-default-text-color;
      background-color: @color-bg-card;
      outline: none;
      border: 1px solid @color-border-normal1;
      border-radius: @btn-border-radius;
      transition: border-color @transition-time @ease-in-out;
      vertical-align: top;
      &:hover {
        border-color: @color-brand-primary;
      }
    }
    .total-page-text {
      margin-left: 21.5px;
    }

    &.mini {
      input {
        height: 24px;
      }
    }

    &-prev,
    &-next {
      a {
        color: @page-default-arrow-color;
        font-size: 14px;
      }
      &:active {
        a {
          color: @page-active-arrow-color;
        }
      }
      &:hover {
        a {
          color: @page-hover-arrow-color;
        }
      }
    }

    &-disabled {
      cursor: @cursor-disabled;
      a {
        color: @page-disabled-arrow-color;
      }
      &:hover {
        a {
          color: @page-disabled-arrow-color;
          cursor: @cursor-disabled;
        }
      }
    }

    &-prev {
      margin-right: 10px;
    }

    &-next {
      margin-left: 20px;
    }
  }
}

.@{page-prefix-cls} {

  @line-height:@page-mini-height - 2px;

  &.mini {
    font-size: @font-size-base;
    .@{page-prefix-cls}-item {
      a {
          font-size: 12px;
        }
      }
    }


  &.mini &__opts {
    height: 24px;
    line-height: 24px;
    .haloe-select-selection {
      height: 24px;
      .haloe-select-selected-value {
        height: 24px;
        line-height: 24px;
      }
    }
  }
  
  &.mini &__title {
    height: 24px;
    line-height: 24px;
  }

  &.mini &-total {
    height: @page-mini-height;
    line-height: @line-height;
  }

  &.mini &-item {
    font-size: @font-size-base;
    margin: 0;
    min-width: @page-mini-height;
    height: @page-mini-height;
    line-height: @line-height;
    border-radius: @border-radius-base;
    margin-left: -1px;
  }

  &.mini &-prev,
  &.mini &-next {
    margin: 0;
    margin-right: 1px;
    min-width: @page-mini-height;
    height: @page-mini-height;
    line-height: @line-height;
    a {
      i:after {
        height: @page-mini-height;
        line-height: @line-height;
      }
    }
  }

  &.mini &-item-jump-prev,
  &.mini &-item-jump-next {
    height: @page-mini-height;
    line-height: @line-height;
    margin-right: 0;
  }

  &.mini &__jump{
    input {
      width: 40px;
      height: @page-mini-height;
    }
    &__btn{
      width:40px;
      height:@page-mini-height;
      line-height:@line-height;
    }
  }
}