@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;
        margin-right: 8px;
    }
    &-item {
        display: inline-block;
        cursor: pointer;
        border: @border-width-base @border-style-base @border-color-base;
        border-radius: @border-radius-base;
        min-width: @pagination-item-size;
        height: @pagination-item-size;
        line-height: @pagination-item-size;
        text-align: center;
        vertical-align: middle;
        margin-right: 8px;
        background: @component-background;
        font-family: Arial;
        outline: 0;
        a {
            text-decoration: none;
            color: @text-color;
            transition: none;
            margin: 0 6px;
        }
        &:focus,
        &:hover {
            transition: all .3s;
            border-color: @primary-color;
            a {
                color: @primary-color;
            }
        }
        &-active {
            // background-color: @primary-color;
            border-color: @primary-color;

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

        font-family: Arial;
        cursor: pointer;
        color: @text-color;
        list-style: none;
        transition: all .3s;
    }
    &-prev,
    &-jump-prev,
    &-jump-next {
        margin-right: 8px;
    }
    &-jump-prev,
    &-jump-next {
        outline: 0;

        &:after {
            content: "...";
            display: block;
            letter-spacing: 2px;
            color: @disabled-color;
            text-align: center;
        }
        &:focus,
        &:hover {
          &:after {
            color: @primary-color;
            .iconfont-size-under-12px(8px);
            letter-spacing: -1px;
            font-family: "idollicon";
          }
        }
    }
    &-jump-prev {
      &:focus,
      &:hover {
        &:after {
          content: "\E925";
        }
      }
    }
    &-jump-next {
      &:focus,
      &:hover {
        &:after {
          content: "\E92D";
        }
      }
    }
    &-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-color-base;
            background-color: @component-background;
            border-radius: @border-radius-base;
            outline: none;
            display: block;
            transition: all .3s;
            &:after {
                display: block;
                height: @pagination-item-size - 2px;
                line-height: @pagination-item-size - 2px;
                text-align: center;
                font-size: 12px;
                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 {
            content: "\E927";
            display: block;
        }
    }
    &-next {
        .@{pagination-prefix-cls}-item-link:after {
            content: "\E928";
            display: block;
        }
    }
    &-disabled {
        &,
        &:hover,
        &:focus {
            cursor: not-allowed;
            a,
            .@{pagination-prefix-cls}-item-link {
                border-color: @border-color-base;
                color: @disabled-color;
                cursor: not-allowed;
            }
        }
    }
    &-slash {
        margin: 0 10px 0 5px;
    }
    &-options {
        display: inline-block;
        vertical-align: middle;
        margin-left: 16px;

        &-size-changer {
            display: inline-block;
            margin-right: 8px;
        }
        &-quick-jumper {
            display: inline-block;
            height: @input-height-base;
            line-height: @input-height-base;

            input {
                .input;
                margin: 0 8px;
                width: 50px;
            }
        }
    }
    &-simple &-prev,
    &-simple &-next {
        height: @pagination-item-size-sm;
        line-height: @pagination-item-size-sm;
        vertical-align: top;
        .@{pagination-prefix-cls}-item-link {
            border: 0;
            height: @pagination-item-size;
            &:after {
                line-height: @pagination-item-size-sm;
            }
        }
    }
    &-simple &-simple-pager {
        display: inline-block;
        margin-right: 8px;
        height: @pagination-item-size;

        input {
            margin-right: 8px;
            box-sizing: border-box;
            background-color: @component-background;
            border-radius: @border-radius-base;
            border: @border-width-base @border-style-base @border-color-base;
            outline: none;
            padding: 0 6px;
            height: 100%;
            text-align: center;
            transition: border-color .3s;

            &:hover {
                border-color: @primary-color;
            }
        }
    }
    &.mini &-total-text,
    &.mini &-simple-pager {
        height: @pagination-item-size;
        line-height: @pagination-item-size;
    }

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

            input {
                .input-sm;
                width: 44px;
            }
        }
    }
}

@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;
    }
}