@import "../../../style/theme/default/index.less";
@import "../../../style/mixins/index";
@import "../../input/style/mixin";

@pagination-prefix-cls: ~"@{idoll-prefix}-pagination";

.@{pagination-prefix-cls} {
    .reset-component;
    ul, ol {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    &:after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
        overflow: hidden;
        visibility: hidden;
    }
    &-total-text {
        display: inline-block;
        vertical-align: middle;
        height: @pagination-item-size;
        line-height: @pagination-item-size - 2px;
        margin-right: 8px;
    }
    &-item {
        display: inline-block;
        cursor: pointer;
        border: @border-width-base @border-style-base @border;
        border-radius: @border-radius-base;
        min-width: @pagination-item-size;
        height: @pagination-item-size;
        text-align: center;
        padding: (@pagination-item-size - 22)/2 0;
        vertical-align: middle;
        margin-right: 8px;
        background: @white;
        font-family: Arial;
        outline: 0;
        text-align: center;
        a {
            text-decoration: none;
            color: @text-color;
            transition: none;
            margin: 0 8px - 2px;
            min-width: @pagination-min-width;
            height: @pagination-height-default;
            display: block;
            margin: auto;
        }
        &:focus,
        &:hover {
            transition: all @animation-duration-slow;
            border-color: @primary-color;
            a {
                color: @primary-color;
            }
        }
        &-active {
            border-color: @primary-color;
            user-select: none;

            &:focus,
            &:hover {
                border-color: @primary-hover;
                color: @primary-hover;
            }
            a,
            &:focus a {
                color: @primary-color;
            }
            &:hover a {
                color: @primary-hover;
                color: @primary-hover;
            }
        }
    }
    &-prev,
    &-next,
    &-jump-prev,
    &-jump-next {
        display: inline-block;
        min-width: @pagination-item-size;
        height: @pagination-item-size;
        line-height: @pagination-item-size - 2px;
        border-radius: @border-radius-base;
        text-align: center;
        vertical-align: middle;

        font-family: Arial;
        cursor: pointer;
        color: @text-color;
        list-style: none;
        transition: all @animation-duration-slow;
    }
    &-prev,
    &-jump-prev,
    &-jump-next {
        margin-right: 8px;
    }
    &-jump-prev,
    &-jump-next {
        outline: 0;
        position: relative;
        &:after {
            content: "...";
            display: block;
            letter-spacing: 2px;
            color: @text-color-disable;
            text-align: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-65%);
        }
        &:focus,
        &:hover {
          &:after {
            color: @primary-color;
            .iconfont-size-under-12px(8px);
            letter-spacing: -1px;
            font-family: "idollicon";
          }
        }
    }
    &-jump-prev {
      position: relative;
      &:focus,
      &:hover {
        &:after {
          content: "\E6CD";
          position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
      }
    }
    &-jump-next {
      &:focus,
      &:hover {
        &:after {
          content: "\E6D0";
          position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
      }
    }
    &-prev,
    &-next {
        outline: 0;

        a{
            color: @text-color;
            user-select: none;
        }

        &:hover a {
            color: @primary-color;
        }

        .@{pagination-prefix-cls}-item-link {
            border: @border-width-base @border-style-base @border;
            background-color: @white;
            border-radius: @border-radius-base;
            outline: none;
            display: block;
            width: @pagination-height-base;
            height: @pagination-height-base;
            padding: @pagination-padding-base;
            position: relative;
            transition: all @animation-duration-slow;
            &:after {
                display: block;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                text-align: center;
                font-size: @font-size-sm;
                font-weight: 500;
                font-family: "idollicon";
            }
        }
        &:focus .@{pagination-prefix-cls}-item-link,
        &:hover .@{pagination-prefix-cls}-item-link {
            border-color: @primary-color;
            color: @primary-color;
        }
    }
    &-prev {
        .@{pagination-prefix-cls}-item-link:after {
            font-family: "idollicon" !important;
            content: "\E70F";
            display: block;
            width: @font-size-lg;
            height: @font-size-lg;
            line-height: @font-size-lg;
        }
    }
    &-next {
        .@{pagination-prefix-cls}-item-link:after {
            font-family: "idollicon" !important;
            content: "\E72A";
            display: block;
            width: @font-size-lg;
            line-height: @font-size-lg;
            height: @font-size-lg;
        }
    }
    &-disabled {
        &,
        &:hover,
        &:focus {
            cursor: not-allowed;
            a,
            .@{pagination-prefix-cls}-item-link {
                border-color: @border;
                color: @text-color-disable;
                cursor: not-allowed;
            }
        }
    }
    &-slash {
        margin: 0 10px 0 5px;
    }
    &-options {
        display: inline-block;
        vertical-align: middle;
        margin-left: 4px;

        &-size-changer {
            display: inline-block;
            margin-right: 8px;
            .idoll-select-selection {
                height: @pagination-height-base;
                padding: (@padding-xs / 2) (@padding-xs - 1px);
                &__rendered {
                   height: @pagination-height-default - 1px;
                   line-height: @pagination-height-default - 2px;
                   padding: 0;
                   padding-left: 0;
                   padding-right: @padding-md + 4px;
                   font-weight: 400;
                }
                .idoll-select-arrow {
                    font-size: @font-size-lg;
                    top: 50%;
                    transform: translateY(-5%)
                }
            }
        }
        &-quick-jumper {
            display: inline-block;
            height: @input-height-base;
            line-height: @input-height-base -2px;
            vertical-align: middle;

            input {
                .input;
                margin: 0 @padding-xs;
                width: @pagination-input-width;
            }
        }
    }
    &-simple &-prev {
        margin-right: 0;
    }
    &-simple &-prev,
    &-simple &-next {
        height: @pagination-item-size-sm;
        min-width: @pagination-item-size-sm;
        line-height: @pagination-item-size-sm - 2px;
        .@{pagination-prefix-cls}-item-link {
            display: inline-block;
            border: 0;
            padding: 0;
            height: @pagination-item-size-sm;
            width: @pagination-item-size-sm;
            &:after {
                line-height: @pagination-item-size-sm - 8px;
            }
        }
    }
    &-simple &-simple-pager {
        display: inline-block;
        min-width: 72px;
        height: @pagination-item-size-sm;

        input {
            box-sizing: border-box;
            background-color: @white;
            border-radius: @border-radius-base;
            border: @border-width-base @border-style-base @border;
            outline: none;
            width: @pagination-simple-input-width;
            height: 100%;
            text-align: center;
            transition: border-color @animation-duration-slow;

            &:hover {
                border-color: @primary-color;
            }
        }
        .@{pagination-prefix-cls}-slash {
            margin: 0 8px 0 8px;
        }
    }

    &.mini {
        li.@{pagination-prefix-cls}-options {
            div.@{pagination-prefix-cls}-options-size-changer,.idoll-select-sm {
                .idoll-select-selection {
                    height:  @pagination-item-size-sm;
                    padding: 1px @padding-xs - 1px;
                        .idoll-select-selection__rendered {
                            padding: 0;
                            padding-right: @padding-md;
                            height: @pagination-height-default - 2px;
                            line-height: @pagination-height-default - 4px;
                            font-weight: 400;
                            min-width: @pagination-input-width + 4px;
                        }
                        .idoll-select-arrow {
                            top: 50%;
                            transform: translateY(5%);
                            font-size: @font-size-sm;
                        }
                }
            }
        }
        li.@{pagination-prefix-cls}-item {
            border: @border-width-base @border-style-base transparent;
            padding: @pagination-mini-padding 0;
            a {
                line-height: @pagination-item-size-sm - 8px;
                display: block;
                margin: auto;
                min-width: 8px;
                height: @pagination-item-size-sm - 8px;
            }
        }
        li.@{pagination-prefix-cls}-item:hover {
            color: @primary-color;
            padding: @pagination-mini-padding 0;
        }
        li.@{pagination-prefix-cls}-item-active {
            border: @border-width-base @border-style-base @primary-color;
            padding: 0;
            padding: @pagination-mini-padding 0;
            a {
                line-height: @pagination-item-size-sm - 8px;
            }
        }
        li.@{pagination-prefix-cls}-item-active:hover {
            border-color: @primary-hover;
            padding: @pagination-mini-padding 0;
        }
    }

    &.mini &-total-text,
    &.mini &-simple-pager {
        height: @pagination-item-size;
        line-height: @pagination-item-size - 2px;
    }

    &.mini &-item {
        border: 0;
        margin: 0;
        min-width: @pagination-item-size-sm;
        height: @pagination-item-size-sm;
        line-height: @pagination-item-size-sm - 2px;
    }
    &.mini &-prev,
    &.mini &-next {
        margin: 0;
        min-width: @pagination-item-size-sm;
        height: @pagination-item-size-sm;
        line-height: @pagination-item-size-sm - 2px;
    }
    &.mini &-prev &-item-link,
    &.mini &-next &-item-link {
        border: 0;
        padding: 0;
        width: @pagination-item-size-sm;
        height: @pagination-item-size-sm;
        line-height: @pagination-item-size-sm;
        &::after {
            height: @pagination-item-size-sm - 8px;
            line-height: @pagination-item-size-sm - 8px;
        }
    }
    &.mini &-jump-prev,
    &.mini &-jump-next {
        height: @pagination-item-size-sm;
        line-height: @pagination-item-size-sm - 2px;
        margin-right: 0;
    }
    &.mini &-options {
        margin-left: 8px;
        &-quick-jumper {
            height: @pagination-item-size-sm;
            line-height: @pagination-item-size-sm - 2px;

            input {
                .input-sm;
                width: @pagination-input-width - 20px;
            }
        }
    }
}

@media only screen and (max-width: @screen-lg) {
    .@{pagination-prefix-cls}-item {
        &-after-jump-prev,
        &-before-jump-next {
            display: none;
        }
    }
}

@media only screen and (max-width: @screen-sm) {
    .@{pagination-prefix-cls}-options {
        display: none;
    }
}