/*! rtl:begin:ignore */
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './token.less';

@pagination-prefix-cls: ~'@{kd-prefix}-pagination';
@dropdown-prefix-cls: ~'@{kd-prefix}-dropdown';
@pagination-action-prefix-cls: ~'@{pagination-prefix-cls}-action';
@pagination-selector-prefix-cls: ~'@{pagination-prefix-cls}-selector';
@pagination-pages-prefix-cls: ~'@{pagination-prefix-cls}-pages';
@pagination-jumper-prefix-cls: ~'@{pagination-prefix-cls}-jumper';
@pagination-options-prefix-cls: ~'@{pagination-prefix-cls}-options';

.@{pagination-prefix-cls} {
  .reset-component;
  color: @pagination-text-color;
  font-size: @pagination-font-size;
  display: flex;
  align-items: center;

  .@{pagination-prefix-cls}-total {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
  }

  .@{pagination-prefix-cls}-current {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;

    .@{pagination-prefix-cls}-current-input {
      box-sizing: border-box;
      width: 44px;
      height: @pagination-size;
      margin: 0 3px;
      padding: 0;
      outline: none;
      text-align: center;
      background: @color-background;
      color: @color-text-primary;
      font-size: @pagination-font-size;
      border-radius: @radius-border;
      border: @pagination-border-size solid @color-border-strong;
      transition: border-color @duration-promptly;

      &:hover,
      &:active,
      &:focus {
        border-color: @pagination-border-hover-color;
      }

      &:disabled {
        color: @pagination-disabled-color;
        border: @pagination-border-size solid @pagination-border-disabled-color;
        background: @pagination-button-disabled-background-color;
        cursor: not-allowed;
      }
    }
  }

  .@{pagination-action-prefix-cls} {
    .reset-component;
    display: inline-flex;
    align-items: center;

    .@{pagination-action-prefix-cls}-item {
      .reset-component;
      display: inline-flex;
      align-items: center;

      &.bordered {
        margin-right: calc(2 * @pagination-button-spacing);

        &:last-child {
          margin-right: 0;
        }

        button {
          border: @pagination-border-size solid @pagination-border-color;

          &:disabled {
            background-color: @pagination-button-disabled-background-color;
          }
        }
      }

      button {
        box-sizing: border-box;
        position: relative;
        width: @pagination-size;
        height: @pagination-size;
        border: none;
        background-color: @color-background;
        border-radius: @radius-border;
        cursor: pointer;
        outline: none;
        transition: border-color @duration-promptly;

        &:hover,
        &:active {
          &:not(:disabled) {
            border-color: @pagination-border-hover-color;
          }

          i {
            color: @pagination-hover-color;
          }
        }

        &[disabled] {
          cursor: not-allowed;

          i {
            color: @pagination-disabled-color;
          }
        }

        i {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: @pagination-icon-size;
          color: @pagination-icon-color;
          transition: color @duration-promptly;
        }
      }
    }
  }

  .@{pagination-selector-prefix-cls} {
    .reset-component;
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 20px;
    outline: none;
    height: @pagination-size;

    .@{pagination-selector-prefix-cls}-size {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      padding: 0;
      line-height: @pagination-size;
      color: @color-text-primary;
      border-radius: @radius-border;
      background: @color-background;
      cursor: pointer;
      border: none;
      outline: none;

      &:hover,
      &:active {
        i {
          color: @pagination-hover-color;
        }
      }

      &.disabled,
      &.disabled > i {
        cursor: not-allowed;
        color: @pagination-disabled-color;
      }

      i {
        margin-left: 4px;
        line-height: @pagination-size;
        font-size: @pagination-icon-size;
        color: @pagination-text-color;
      }
    }

    .@{dropdown-prefix-cls}-menu-item {
      text-align: right;
      padding-right: @pagination-dropdown-item-spacing-horizontal;
      padding-left: @pagination-dropdown-item-spacing-horizontal;

      span {
        white-space: nowrap;
      }
    }
  }

  // 简化版分页
  &.simple {
    .@{pagination-prefix-cls}-action {
      display: inline-flex;
      justify-content: space-around;
      align-items: center;
      height: @pagination-size;
      border-radius: @radius-border;
      border: @pagination-border-size solid transparent;

      &.bordered {
        border-color: @pagination-border-color;
        transition: border-color @duration-promptly;

        &:active:not(.disabled) {
          border-color: @pagination-border-hover-color;
        }

        &.disabled,
        &.disabled > .@{pagination-prefix-cls}-item > button {
          background-color: @pagination-button-disabled-background-color;
        }
      }

      &.disabled > .@{pagination-prefix-cls}-action-item {
        color: @pagination-disabled-color;
      }

      &-item {
        .reset-component;
        height: @pagination-size;
        overflow: hidden;
        margin: 0 8px;
        display: inline-flex;
        align-items: center;
        color: @color-text-primary;

        &:first-child,
        &:last-child {
          margin: 0;
        }

        .@{pagination-prefix-cls}-current {
          margin-right: 2px;

          .@{pagination-prefix-cls}-current-input {
            margin: 0;

            &:disabled {
              color: @pagination-disabled-color;
              cursor: not-allowed;
            }
          }
        }

        .@{pagination-prefix-cls}-total {
          margin-right: 0;
          margin-left: 2px;
        }

        &.bordered > button {
          border: none;
        }

        button {
          box-sizing: border-box;
          position: relative;
          width: calc(@pagination-size - 2px);
          height: calc(@pagination-size - 2px);
          border: none;
          background-color: @color-background;
          border-radius: @radius-border;
          cursor: pointer;
          outline: none;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          transition: border-color @duration-promptly;

          &:hover,
          &:active {
            &:not(:disabled) {
              border-color: @pagination-border-hover-color;
            }

            i {
              color: @pagination-hover-color;
            }
          }

          &:disabled {
            cursor: not-allowed;

            i {
              color: @pagination-disabled-color;
            }
          }

          i {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            line-height: calc(@pagination-size - 2px);
            font-size: @pagination-icon-size;
            color: @pagination-icon-color;
            transition: color @duration-promptly;
          }
        }
      }
    }
  }

  // 精细版分页
  &.less {
    .@{pagination-pages-prefix-cls} {
      .reset-component;
      display: inline-block;

      &-item {
        .reset-component;
        position: relative;
        display: inline-flex;
        align-items: center;
        margin-right: @pagination-button-spacing;

        &:last-child {
          margin-right: 0;
        }

        &.active > button:disabled {
          background-color: @color-background-contain;
        }

        &:hover,
        &:active,
        &.active {
          button {
            color: @color-theme;
          }
        }

        &:first-child,
        &:last-child {
          button {
            width: @pagination-size;
            padding: 0;
            border-radius: @radius-border;
            border: @pagination-border-size solid @pagination-border-color;

            &:hover,
            &:active {
              border-color: @pagination-border-hover-color;

              &:disabled {
                border-color: @pagination-border-disabled-color;
              }
            }
          }
        }

        button {
          .reset-component;
          min-width: @pagination-size;
          height: @pagination-size;
          padding: 0 4px;
          color: @color-text-primary;
          font-size: @pagination-font-size;
          cursor: pointer;
          outline: none;
          border: none;
          background: @color-background;
          transition: color @duration-promptly, border-color @duration-promptly;
          display: inline-flex;
          align-items: center;
          justify-content: center;

          &:disabled {
            cursor: not-allowed;
            color: @pagination-disabled-color;
          }
        }
      }
    }
  }

  // 精细版分页
  &.nicety {
    .@{pagination-pages-prefix-cls} {
      .reset-component;
      display: inline-flex;
      align-items: center;

      &-item {
        .reset-component;
        position: relative;
        display: inline-flex;
        align-items: center;
        margin-right: @pagination-button-spacing;

        &:last-child {
          margin-right: 0;
        }

        &:hover,
        &:active,
        &.active {
          button {
            border-color: @pagination-border-hover-color;

            &:disabled {
              border-color: @pagination-border-disabled-color;
            }
          }
        }

        &.active > button:disabled {
          background-color: @color-background-contain;
        }

        &.active,
        &:hover {
          button {
            color: @color-theme;

            &:not(:disabled) > .@{pagination-pages-prefix-cls}-jumper-icon {
              opacity: 1;
            }
          }
        }

        &:first-child,
        &:last-child {
          button {
            width: @pagination-size;
            padding: 0;
            line-height: calc(@pagination-size - 2px);
          }
        }

        button {
          .reset-component;
          min-width: @pagination-size;
          height: @pagination-size;
          padding: 0 6px;
          cursor: pointer;
          outline: none;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: @pagination-font-size;
          color: @color-text-primary;
          border-radius: @radius-border;
          border: @pagination-border-size solid @pagination-border-color;
          background: @color-background;
          transition: color @duration-promptly, border-color @duration-promptly, background-color @duration-promptly;

          &:disabled {
            cursor: not-allowed;
            color: @pagination-disabled-color;
          }

          > i {
            font-size: 16px;
          }

          .@{pagination-pages-prefix-cls}-jumper-icon {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            color: @color-theme;
            line-height: @pagination-size;
            background-color: @color-background;
            transition: opacity @duration-promptly;
          }
        }
      }
    }

    .@{pagination-jumper-prefix-cls} {
      display: inline-flex;
      align-items: center;
      margin-left: 4px;

      .@{pagination-jumper-prefix-cls}-input {
        box-sizing: border-box;
        width: 40px;
        height: @pagination-size;
        padding: 0;
        outline: none;
        text-align: center;
        background: @color-background;
        color: @color-text-primary;
        font-size: @pagination-font-size;
        border-radius: @radius-border;
        border: @pagination-border-size solid @color-border-strong;
        transition: border-color @duration-promptly;

        &:hover,
        &:active,
        &:focus {
          border-color: @pagination-border-hover-color;
        }

        &:disabled {
          color: @pagination-disabled-color;
          border: @pagination-border-size solid @pagination-border-disabled-color;
          background: @pagination-button-disabled-background-color;
          cursor: not-allowed;
        }
      }

      .@{pagination-jumper-prefix-cls}-button {
        .reset-component;
        padding: 0 @pagination-jumper-spacing;
        height: @pagination-size;
        margin-left: @pagination-button-spacing;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        outline: none;
        color: @color-text-primary;
        font-size: @pagination-font-size;
        border-radius: @radius-border;
        border: @pagination-border-size solid @color-border-strong;
        background: @color-background;
        transition: border-color @duration-promptly;

        &:hover,
        &:active {
          color: @color-theme;
          border-color: @pagination-border-hover-color;

          &:disabled {
            border-color: @pagination-border-disabled-color;
          }
        }

        &:disabled {
          color: @pagination-disabled-color;
          cursor: not-allowed;
        }
      }
    }

    .@{pagination-options-prefix-cls} {
      .reset-component;
      position: relative;
      display: inline-flex;
      align-items: center;
      margin-left: 22px;
      outline: none;
      height: @pagination-size;
      color: @color-text-primary;

      .@{pagination-options-prefix-cls}-size {
        position: relative;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        min-width: 64px;
        height: @pagination-size;
        margin-right: 8px;
        padding: 0 24px 0 4px;
        font-size: @pagination-font-size;
        color: @color-text-primary;
        border-radius: @radius-border;
        border: @pagination-border-size solid @color-border-strong;
        background: @color-background;
        cursor: pointer;
        outline: none;
        transition: border-color @duration-promptly;

        &:hover,
        &:active {
          border-color: @pagination-border-hover-color;

          &.disabled {
            border-color: @color-border-strong;
          }
        }

        &.disabled,
        &.disabled > i {
          cursor: not-allowed;
          color: @pagination-disabled-color;
        }

        i {
          position: absolute;
          top: 50%;
          right: 5px;
          line-height: calc(@pagination-size - 2px);
          font-size: @pagination-icon-size;
          transform: translateY(-50%);
        }

        &:hover {
          i {
            color: @pagination-hover-color;
          }
        }

        &.@{pagination-prefix-cls}-options-dropdown-open {
          i {
            transform: rotate(180deg) translateY(50%);
          }
        }
      }
    }
  }

  &-options-dropdown {
    &-text {
      white-space: nowrap;
    }
    i {
      transition: transform @duration-promptly;
    }

    &-open {
      i {
        transform: rotate(180deg);
      }
    }
  }
}
.@{pagination-prefix-cls}-rtl {
  direction: rtl;
  .@{pagination-prefix-cls}-total {
    margin-left: 12px;
    margin-right: 0;
  }
  .@{pagination-prefix-cls}-current {
    margin-right: 0;
    margin-left: 12px;
  }
  .@{pagination-action-prefix-cls} {
    .@{pagination-action-prefix-cls}-item {
      &.bordered {
        margin-left: calc(2 * @pagination-button-spacing);
        margin-right: 0;
        &:last-child {
          margin-left: 0;
        }
      }
    }
  }
  .@{pagination-selector-prefix-cls} {
    margin-right: 20px;
    margin-left: 0;
    .@{pagination-selector-prefix-cls}-size {
      i {
        margin-left: 0;
        margin-right: 4px;
      }
    }
  }
  &.simple {
    .@{pagination-prefix-cls}-action {
      &-item {
        .@{pagination-prefix-cls}-current {
          margin-right: 0;
          margin-left: 2px;
        }
        .@{pagination-prefix-cls}-total {
          margin-left: 0;
          margin-right: 2px;
        }
      }
    }
  }
  &.less {
    .@{pagination-pages-prefix-cls} {
      &-item {
        margin-left: @pagination-button-spacing;
        margin-right: 0;
        &:last-child {
          margin-left: 0;
        }
      }
    }
  }
  &.nicety {
    .@{pagination-pages-prefix-cls} {
      &-item {
        margin-left: @pagination-button-spacing;
        margin-right: 0;
        &:last-child {
          margin-left: 0;
        }
      }
    }
    .@{pagination-jumper-prefix-cls} {
      margin-right: @pagination-button-spacing;
      margin-left: 0;
      .@{pagination-jumper-prefix-cls}-button {
        margin-right: @pagination-button-spacing;
        margin-left: 0;
      }
    }
    .@{pagination-options-prefix-cls} {
      margin-right: 22px;
      margin-left: 0;
      .@{pagination-options-prefix-cls}-size {
        margin-right: 0;
        margin-left: 8px;
        padding: 0 4px 0 24px;
        i {
          left: 5px;
          right: auto;
        }
      }
      .@{kd-prefix}-dropdown {
        &-menu {
          &-item {
            & > span {
              text-align: right;
            }
          }
        }
      }
    }
  }
}
/*! rtl:end:ignore */