@page-prefix-cls: ~"@{css-prefix}page";
@select-prefix-cls: ~"@{css-prefix}select-selected-value";
@select-prefix: ~"@{css-prefix}select";
.@{page-prefix-cls} {
    font-size: 0;
    &:after {
        content: '';
        display: block;
        height: 0;
        clear: both;
        overflow: hidden;
        visibility: hidden;
    }



    &-item {
        display: inline-block;
        //float: left;
        vertical-align: middle;
        min-width: @btn-circle-size;
        height: @btn-circle-size;
        line-height: @btn-circle-size - 2px;
        text-align: center;
        list-style: none;
        background-color: #fff;
        user-select: none;
        cursor: pointer;
        font-family: Arial;
        font-weight: 500;
        font-size: @font-size-small;
        border: 1px solid @border-color-base;
        //border-radius: @btn-border-radius;
        //transition: all @transition-time @ease-in-out;
        //transition: border @transition-time @ease-in-out, color @transition-time @ease-in-out;
        margin-left: -1px;
        z-index: 0;
        position: relative;

        a {
            font-family: "Monospaced Number";
            margin: 0 6px;
            text-decoration: none;
            color: @text-color;

            //transition: none;
        }

        &-firstpage{
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        &:hover {
            border-color: tint(@primary-color, 20%);
            z-index: 1;
            background-color: tint(@primary-color, 20%);
            a {
                color: white;
            }
        }

        &-active {
            border-color: @primary-color;
            z-index: 1;
            background-color: @primary-color;
            a, &:hover a {
                color: white;
            }
        }
    }


    &-item-jump-prev, &-item-jump-next {
        font-size: @font-size-small;
        &:after {
            content: "\2022\2022\2022";
            display: block;
            letter-spacing: 1px;
            color: #ccc;
            text-align: center;
        }

        i{
            display: none;
        }

        &:hover {
            &:after{
                display: none;
            }
            i{
                display: inline;
            }
        }
    }

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

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



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

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

    &-prev,
    &-next {
        background-color: #fff;
        position: relative;

        a {
            color: #666;

            i{
                font-size: @font-size-small;
            }
        }

        &:hover {
            border-color: tint(@primary-color, 20%);
            z-index: 1;
            background-color: tint(@primary-color, 20%);
            a {
                color: white;
            }
        }
    }

    &-disabled {
        cursor: @cursor-disabled;
        a {
            color: #ccc;
            cursor: @cursor-disabled;
        }
        i{
            cursor: @cursor-disabled;
        }
        &:hover {
            background: none!important;
            border-color: @border-color-base;
            a {
                color: #ccc;
                cursor: @cursor-disabled;
            }
        }
    }

    &-options {
        display: inline-block;
        vertical-align: middle;
        font-size: @font-size-small;
        //float: left;
        margin-left: 12px;
        &-sizer {
            display: inline-block;
            //float: left;
            // margin-right: 10px;
            position: relative;
            height: @btn-circle-size;
            min-width: 96px;
            line-height: @btn-circle-size - 2px;
            text-align: center;

            .@{select-prefix}{
                height:@btn-circle-size;

                &-selection{
                    height:@btn-circle-size!important;
                    border-radius: 0!important;
                }

                &-selected-value{
                    font-size: @font-size-small;
                    height: (@btn-circle-size - 2px)!important;
                    line-height: (@btn-circle-size - 2px)!important;
                }
            }
        }

        &-elevator {
            display: inline-block;
            //vertical-align: middle;
            //float: left;
            height: @btn-circle-size;
            line-height: @btn-circle-size;
            vertical-align: middle;

            input {
                .input;
                border-radius: 0;  //@btn-border-radius
                margin: 0 4px;
                width:45px;
                height: @btn-circle-size;
            }
        }


    }

    &-total {
        display: inline-block;
        //float: left;
        height: @btn-circle-size;
        line-height: @btn-circle-size;
        margin-right: 10px;
        vertical-align: middle;
    }

    &-simple &-prev,
    &-simple &-next {
        margin: 0;
        border: 0;
        height: 24px;
        line-height: normal;
        font-size: 18px;
    }

    &-simple &-simple-pager {
        display: inline-block;
        //float: left;
        margin-right: 8px;
        vertical-align: middle;
        font-size: 12px;

        input {
            width: 30px;
            height: 24px;
            margin: 0 8px;
            padding: 5px 8px;
            text-align: center;
            box-sizing: border-box;
            background-color: #fff;
            outline: none;
            border: 1px solid @border-color-base;
            border-radius: @btn-border-radius;
            transition: border-color @transition-time @ease-in-out;

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

        span{
            padding: 0 8px 0 2px;
        }
    }

    &-custom-text, &-custom-text:hover{
        border-color: transparent;
        margin-left: 0;
    }



}

.@{page-prefix-cls} {

    &.mini {
        .@{page-prefix-cls}-total {
            height: @btn-circle-size-small;
            line-height: @btn-circle-size-small;
        }
        .@{page-prefix-cls}-item{
            border: 0;
            margin: 0;
            min-width: @btn-circle-size-small;
            height: @btn-circle-size-small;
            line-height: @btn-circle-size-small;
            border-radius: @btn-border-radius-small;
        }

        .@{page-prefix-cls}-next,.@{page-prefix-cls}-prev {
            margin: 0;
            min-width: @btn-circle-size-small;
            height: @btn-circle-size-small;
            line-height: @btn-circle-size-small - 2px;
            border: 0;
            border-radius: @btn-border-radius-small;

            a {
                i:after {
                    height: @btn-circle-size-small;
                    line-height: @btn-circle-size-small;
                }
            }
        }

        .@{page-prefix-cls}-item-jump-prev,
        .@{page-prefix-cls}-item-jump-next {
            height: @btn-circle-size-small;
            line-height: @btn-circle-size-small;
            border-radius: @btn-border-radius-small;
            border: none;
            margin-right: 0;
        }

        .@{page-prefix-cls}-options {
            margin-left: 8px;
            &-elevator {
                height: @btn-circle-size-small;
                line-height: @btn-circle-size-small;

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

            &-sizer {
                height: @btn-circle-size-small;
                line-height: @btn-circle-size-small;
                .burgeon-select{
                    height: @btn-circle-size-small;
                    &-selection{
                        height:@btn-circle-size-small!important;
                        border-radius: 3px!important;
                    }

                    &-selected-value{
                        font-size: @font-size-small;
                        height: (@btn-circle-size-small - 2px)!important;
                        line-height: (@btn-circle-size-small - 2px)!important;
                    }
                }
                input {
                    .input-small;
                    width: 44px;
                }
            }
        }

    }





}