@import '@devui/theme/styles-var/devui-var.scss';

.#{$devui-prefix}-pagination {
  display: flex;
  align-items: center;
  font-size: $devui-font-size;

  .#{$devui-prefix}-pagination__size {
    position: relative;
    vertical-align: middle;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 28px;
    height: 32px;
    margin: 0 8px 0 0;
    padding: 4px 10px;
    background-color: $devui-base-bg;
    border-color: $devui-form-control-line;
    border-radius: $devui-border-radius;
    border-width: 1px;
    border-style: solid;
    color: $devui-text;
    transition: border-color 0.3s $devui-animation-ease-in-out-smooth;
    outline: 0;
    box-sizing: border-box;
    cursor: pointer;

    span {
      margin-right: 8px;
    }

    svg {
      transition: transform $devui-animation-ease-in-out-smooth $devui-animation-duration-slow;

      path {
        fill: $devui-text;
      }
    }

    &:hover {
      border-color: $devui-form-control-line-hover;
    }

    &:focus {
      border-color: $devui-form-control-line-active;
    }

    &.#{$devui-prefix}-pagination__size--sm {
      height: 26px;
    }

    &.#{$devui-prefix}-pagination__size--lg {
      height: 46px;
    }

    &.#{$devui-prefix}-pagination__size--open {
      svg {
        transform: rotate(180deg);
      }
    }

    & > .#{$devui-prefix}-icon__container {
      display: flex;
      align-items: center;
    }
  }

  .#{$devui-prefix}-pagination__total-size {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin: 0 12px 0 0;
    color: $devui-text-weak;
  }

  .#{$devui-prefix}-pagination__list,
  .#{$devui-prefix}-pagination__item {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  a {
    text-decoration: none;
    color: #3eaf7c;
  }

  .#{$devui-prefix}-pagination__list {
    vertical-align: middle;
    display: inline-flex;
    align-items: center;

    > .disabled > a,
    > .disabled > a:hover,
    > .disabled > a:focus {
      cursor: not-allowed;
    }

    li.#{$devui-prefix}-pagination__item {
      cursor: pointer;

      &:not(.disabled).active {
        a.#{$devui-prefix}-pagination__link {
          text-decoration: none;
          background-color: $devui-primary;
          color: $devui-light-text;
          cursor: pointer;
        }

        a.#{$devui-prefix}-pagination__link:hover {
          text-decoration: none;
          background-color: $devui-primary;
          color: $devui-light-text;
          border: 1px solid transparent;
          box-shadow: none;
        }
      }

      .#{$devui-prefix}-pagination__link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 28px;
        min-width: 28px;
        margin-left: 4px;
        padding: 0 4px;
        line-height: 24px;
        border-radius: $devui-border-radius;
        border: 1px solid transparent;
        color: $devui-text-weak;
        transition: background-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;

        &:hover {
          text-decoration: none;
          background-color: transparent;
          color: $devui-text;
          border: 1px solid $devui-dividing-line;
          box-shadow: 0 1px 3px 0 $devui-light-shadow;
        }

        svg {
          vertical-align: middle;

          g polygon {
            fill: $devui-icon-text;
          }
        }
      }

      &.disabled {
        a.#{$devui-prefix}-pagination__link {
          cursor: not-allowed;
          color: $devui-disabled-text;

          &:hover {
            box-shadow: none;
            border: none;
          }

          svg g polygon {
            fill: $devui-disabled-text;
          }
        }
      }

      &:not(.disabled) {
        a.#{$devui-prefix}-pagination__link {
          &:active {
            svg g polygon {
              fill: $devui-text;
            }
          }

          &:hover:not(:active) {
            svg g polygon {
              fill: $devui-icon-fill-active-hover;
            }
          }
        }
      }
    }
  }

  .#{$devui-prefix}-pagination--sm > li.#{$devui-prefix}-pagination__item > a.#{$devui-prefix}-pagination__link {
    min-width: 24px;
    height: 24px;
    line-height: 22px;
    font-size: $devui-font-size-sm;
  }

  .#{$devui-prefix}-pagination--lg > li.#{$devui-prefix}-pagination__item > a.#{$devui-prefix}-pagination__link {
    min-width: 40px;
    height: 40px;
    line-height: 38px;
    font-size: $devui-font-size-lg;
  }

  .#{$devui-prefix}-pagination__jump-container {
    display: inline-flex;
    position: relative;
    margin: 0 12px;
    vertical-align: middle;
    align-items: center;

    .#{$devui-prefix}-input {
      display: inline-block;
      width: 42px;
      vertical-align: middle;
      margin: 0 4px;
    }

    .#{$devui-prefix}-input--lg {
      width: 56px;
    }
  }

  .#{$devui-prefix}-pagination__jump-button {
    display: inline-flex;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    border-radius: $devui-border-radius;
    border: 1px solid $devui-line;
    cursor: pointer;
    margin-left: 4px;
    align-items: center;
    justify-content: center;

    .#{$devui-prefix}-pagination__go {
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-left: 6px solid $devui-icon-text;
      border-bottom: 6px solid transparent;
    }

    &:hover {
      border-color: $devui-brand-active;

      .#{$devui-prefix}-pagination__go {
        border-left-color: $devui-brand-active;
      }
    }
  }

  .#{$devui-prefix}-pagination__jump-size--default {
    width: 28px;
    height: 28px;

    .#{$devui-prefix}-pagination__go {
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-left: 10px solid $devui-icon-text;
      border-bottom: 8px solid transparent;
    }
  }

  .#{$devui-prefix}-pagination__jump-size--sm {
    width: 24px;
    height: 24px;

    .#{$devui-prefix}-pagination__go {
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-left: 6px solid $devui-icon-text;
      border-bottom: 6px solid transparent;
    }

    .#{$devui-prefix}-pagination__link {
      height: 30px;
      line-height: 32px;
    }
  }

  .#{$devui-prefix}-pagination__jump-size--lg {
    width: 46px;
    height: 46px;

    .#{$devui-prefix}-pagination__go {
      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-left: 14px solid $devui-icon-text;
      border-bottom: 14px solid transparent;
    }
  }

  .#{$devui-prefix}-pagination__config {
    color: $devui-text;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px;
  }

  .#{$devui-prefix}-pagination__setup-icon {
    line-height: 30px;
    cursor: pointer;
    display: flex;
  }

  .#{$devui-prefix}-pagination__config-container {
    padding: 4px 0;
    box-shadow: $devui-shadow-length-connected-overlay $devui-shadow;
    border-radius: $devui-border-radius;
    width: 150px;
    background-color: $devui-connected-overlay-bg;
    line-height: 26px;
    position: absolute;
    left: -136px;
    top: 28px;
    cursor: auto;
    z-index: $devui-z-index-dropdown;
    user-select: none;
  }

  /* 配置中的每一项，自定义项建议应用此样式或在此基础上修改 */
  .#{$devui-prefix}-pagination__config-item {
    padding-bottom: 8px;
    padding-top: 4px;
    border-bottom: 1px solid $devui-line;

    &:last-child {
      border-bottom: none;
    }
  }

  /* 配置中每一项的标题样式，自定义项建议应用此样式或在此基础上修改 */
  .config-item-title {
    color: $devui-line;
    padding-left: 8px;
    font-size: $devui-font-size;
    line-height: 1.5;
  }

  .#{$devui-prefix}-pagination__number {
    padding-left: 8px;
    margin-top: 4px;
    display: flex;

    div {
      color: $devui-text;
      cursor: pointer;
      border-top: 1px solid $devui-line;
      border-bottom: 1px solid $devui-line;
      border-right: 1px solid $devui-line;
      text-align: center;
      height: 26px;
      width: 26px;

      &:first-child {
        border-left: 1px solid $devui-line;
      }

      &:hover {
        background-color: $devui-list-item-hover-bg;
        color: $devui-list-item-hover-text;
      }

      &.choosed {
        color: $devui-list-item-active-text;
        background-color: $devui-list-item-active-bg !important;
        cursor: auto !important;
      }
    }
  }

  .config-item-words {
    color: $devui-text;
    padding-left: 8px;
    font-size: $devui-font-size;
    margin-top: 4px;
  }

  .config-item-words:hover {
    background-color: $devui-area;
    cursor: pointer;
  }
}

.#{$devui-prefix}-pagination__size-list {
  min-width: 60px;
  padding: 12px;
  background-clip: padding-box;
  background-color: $devui-connected-overlay-bg;
  border-radius: $devui-border-radius;
  outline: none;

  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  li {
    display: block;
    width: 100%;
    min-height: 36px;
    line-height: 20px;
    padding: 8px 12px;
    border: 0;
    border-radius: $devui-border-radius;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth,
      background-color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth;

    &:hover:not(.active) {
      color: $devui-list-item-hover-text;
      background-color: $devui-list-item-hover-bg;
    }

    &.active {
      color: $devui-list-item-active-text;
      background-color: $devui-list-item-active-bg;
    }
  }
}