mor-pagination{
    display: inline-block;

    > .page-content{
        margin-bottom: 1em;
    }

    > .list{
        font-size: 0;
        vertical-align: top !important;
        text-align: center;
        display: flex;
        align-items: center;

        > a{
            box-sizing: border-box;
            display: inline-block;
            vertical-align: middle;
            padding: 0 0.8em;
            cursor: pointer;
            line-height: 2.4em;
            height: 2.4em;
            color: @colorNeutral9 !important;
            text-decoration: none !important;

            &.ignore{
                cursor: default;
                line-height: 1.8em;
                padding: 0 0.2em;
            }

            &.current{
                color: @colorWhite !important;
            }

            .mo-icon{
                font-size: @fontSize*0.8125;
                vertical-align: 1px !important;
                color: @colorNeutral8;
            }

            &.prev,
            &.next{
                padding: 0 0.6em;

                &.cant-click{
                    background-color: @colorComponentItemBgDisabled !important;
                    color: darken(@colorComponentItemFontDisabled, 3%) !important;
                    cursor: not-allowed;
                }
            }

            &:not(:first-child){
                border-left: none;
            }

            &:first-child{
                border-top-left-radius: @borderRadius;
                border-bottom-left-radius: @borderRadius;
            }

            &:last-child{
                border-top-right-radius: @borderRadius;
                border-bottom-right-radius: @borderRadius;
            }

            &:not(.current):not(.ignore):not(.cant-click):hover{
                text-decoration: none !important;
                background-color: darken(@colorComponentItemBgHover, 5%) !important;
                color: darken(@colorComponentItemFontHover, 3%) !important;
            }

            &:not(.current):not(.ignore):not(.cant-click):active{
                box-shadow: 0 0 4px rgba(0, 0, 0, 0.18) inset;
                color: darken(@colorComponentItemFontHover, 3%) !important;
            }

            &:not(.ignore).current{
                cursor: default;
            }

            &.disabled{
                background: transparent !important;
                cursor: default;
                pointer-events: none;

                &:hover{
                    background-color: transparent !important;
                }

                .mo-icon{
                    visibility: hidden;
                }
            }
        }

        > .page-nav{
            display: inline-block;
            vertical-align: middle;
            padding: 0 0.8em;
            line-height: 2.4em;
            height: 2.4em;
        }

        > .page-jump{
            display: inline-block;
            position: relative;
            vertical-align: top !important;
            box-sizing: border-box;

            mor-textinput.page-num {
                position: relative;
                z-index: 2;
                outline: none;
                -webkit-appearance: none;
                border-top-right-radius: @borderRadius;
                border-bottom-right-radius: @borderRadius;

                .textinput-wrap input{
                    vertical-align: top !important;
                    // border: 1px solid @colorFormBorder;
                    padding: 0 1.5em 0 0.8em;
                    line-height: 2.4em;
                    height: 2.4em;
                    width: 6em;
                    box-sizing: border-box;
                }
            }

            .mo-icon {
                position: absolute;
                top: 0;
                right: @borderRadius;
                z-index: 10;
                width: 24px;
                color: darken(@colorComponentItemFont, 3%);
                cursor: pointer;

                &:hover{
                    color: darken(@colorComponentItemFontHover, 3%);
                }
            }
        }
    }

    &.type-block{
        > .list{
            > a{
                background-color: @colorComponentItemBg !important;

                &.prev,
                &.next{
                    &.cant-click{
                        background-color: @colorComponentItemBgDisabled !important;
                        color: darken(@colorComponentItemFontDisabled, 3%) !important;
                    }
                }
            }

            > .page-jump{
                margin-left: 2px;

                mor-textinput.page-num {
                    .textinput-wrap input{
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                    }
                }
            }
        }
    }

    &.type-normal,
    &.type-compact{
        > .list{
            > a{
                background-color: @colorWhite !important;
                border: 1px solid @colorFormBorder;
                border-radius: @borderRadius;

                &:first-child{
                    margin-left: 0;
                }

                &.ignore{
                    border: none;
                }

                &.prev,
                &.next{
                    background-color: @colorWhite !important;

                    &.cant-click{
                        background-color: @colorComponentItemBgDisabled !important;
                        border-color: @colorComponentItemBgDisabled !important;
                        color: darken(@colorComponentItemFontDisabled, 3%) !important;
                    }
                }
            }

            > .page-jump{
                margin-left: @fontSize*0.5;
            }
        }
    }

    &.type-compact{
        > .list{
            > a{
                border: none;
                padding: 0 0.4em;
                line-height: 1.8em;
                height: 1.8em;
            }

            > .page-jump{
                mor-textinput.page-num {
                    .textinput-wrap input{
                        // padding: 0 1.2em 0 0.5em;
                        line-height: 1.8em;
                        height: 1.8em;
                        width: 4.5em;
                    }
                }
            }
        }
    }

    &.type-simple{
        a.next{
            border-top-right-radius: @borderRadius;
            border-bottom-right-radius: @borderRadius;
        }

        > .list > .page-jump{
            margin-left: 2px;

            mor-textinput.page-num{
                border-radius: @borderRadius;

                .textinput-wrap input{
                    border-radius: @borderRadius;
                }
            }
        }

        > .page-nav{
            color: @colorNeutral9 !important;
        }
    }

    &.type-mini{
        a.next{
            border-top-right-radius: @borderRadius;
            border-bottom-right-radius: @borderRadius;
            margin-left: 2px;
        }

        > .list > .page-jump{
            margin-left: 2px;

            mor-textinput.page-num{
                border-radius: @borderRadius;

                .textinput-wrap input{
                    border-radius: @borderRadius;
                }
            }
        }

        > .page-nav{
            color: @colorNeutral9 !important;
        }
    }

    &.si-xxl{
        .list{
            > a,
            > .page-nav{
                font-size: @fontSize*1.3;
            }

            .page-jump{
                .page-num > .textinput-wrap input{
                    font-size: @fontSize*1.3;
                }

                .mo-icon{
                    line-height: @fontSize*3.125;
                    font-size: @fontSize*1.0625;
                }
            }
        }

        &.type-normal,
        &.type-compact{
            > .list > a{
                margin-left: @fontSize*0.5;
            }
        }

        &.type-compact{
            .list > .page-jump{
                .page-num > .textinput-wrap input{
                    font-size: @fontSize*1.1875;
                }

                .mo-icon{
                    line-height: @fontSize*2.125;
                }
            }
        }
    }

    &.si-xl{
        .list{
            > a,
            > .page-nav{
                font-size: @fontSize*1.2;
            }

            .page-jump{
                .page-num > .textinput-wrap input{
                    font-size: @fontSize*1.2;
                }

                .mo-icon{
                    line-height: @fontSize*2.875;
                    font-size: @fontSize*1;
                }
            }
        }

        &.type-normal,
        &.type-compact{
            > .list > a{
                margin-left: @fontSize*0.4375;
            }
        }

        &.type-compact{
            .list > .page-jump{
                .page-num > .textinput-wrap input{
                    font-size: @fontSize*1.125;
                }

                .mo-icon{
                    line-height: @fontSize*2;
                }
            }
        }
    }

    &.si-l{
        .list{
            > a,
            > .page-nav{
                font-size: @fontSize*1.1;
            }

            .page-jump{
                .page-num > .textinput-wrap input{
                    font-size: @fontSize*1.1;
                }

                .mo-icon{
                    line-height: @fontSize*2.5;
                    font-size: @fontSize*1;
                }
            }
        }

        &.type-normal,
        &.type-compact{
            > .list > a{
                margin-left: @fontSize*0.375;
            }
        }

        &.type-compact{
            .list > .page-jump{
                .page-num > .textinput-wrap input{
                    font-size: @fontSize*1.0625;
                }

                .mo-icon{
                    line-height: @fontSize*2;
                }
            }
        }
    }

    &.si-m{
        .list{
            > a,
            > .page-nav{
                font-size: @fontSize*1;
            }

            .page-jump{
                .page-num > .textinput-wrap input{
                    font-size: @fontSize*1;
                }

                .mo-icon{
                    line-height: @fontSize*2.5;
                    font-size: @fontSize*0.9375;
                }
            }
        }

        &.type-normal,
        &.type-compact{
            > .list > a{
                margin-left: @fontSize*0.3125;
            }
        }

        &.type-compact{
            .list > .page-jump{
                .page-num > .textinput-wrap input{
                    font-size: @fontSize*0.9375;
                }

                .mo-icon{
                    line-height: @fontSize*1.75;
                }
            }
        }
    }

    &.si-s{
        .list{
            > a,
            > .page-nav{
                font-size: @fontSize*0.875;
            }

            .page-jump{
                .page-num > .textinput-wrap input{
                    font-size: @fontSize*0.875;
                }

                .mo-icon{
                    line-height: @fontSize*2.125;
                    font-size: @fontSize*0.8125;
                }
            }
        }

        &.type-normal,
        &.type-compact{
            > .list > a{
                margin-left: @fontSize*0.25;
            }
        }

        &.type-compact{
            .list > .page-jump{
                .page-num > .textinput-wrap input{
                    font-size: @fontSize*0.875;
                }

                .mo-icon{
                    line-height: @fontSize*1.75;
                }
            }
        }
    }

    &.si-xs{
        .list{
            > a,
            > .page-nav{
                font-size: @fontSize*0.75;
                padding: 0 0.6em;
                line-height: 2.2em;
                height: 2.2em;

                &.ignore{
                    line-height: 1.6em;
                    padding: 0 0.1em;
                }
            }

            .page-jump{
                .page-num > .textinput-wrap input{
                    font-size: @fontSize*0.75;
                    padding: 0 1.8em 0 0.6em;
                    line-height: 2.2em;
                    height: 2.2em;
                }

                .mo-icon{
                    line-height: @fontSize*1.5625;
                    font-size: @fontSize*0.75;
                }
            }
        }

        &.type-normal,
        &.type-compact{
            > .list > a{
                margin-left: @fontSize*0.1875;
            }
        }

        &.type-compact{
            .list > .page-jump{
                .page-num > .textinput-wrap input{
                    font-size: @fontSize*0.8125;
                }

                .mo-icon{
                    line-height: @fontSize*1.5;
                }
            }
        }
    }

    &.si-xxs{
        .list{
            > a,
            > .page-nav{
                font-size: @fontSize*0.75;
                padding: 0 0.4em;
                line-height: 2em;
                height: 2em;

                &.ignore{
                    line-height: 1.4em;
                    padding: 0;
                }
            }

            .page-jump{
                .page-num > .textinput-wrap input{
                    font-size: @fontSize*0.75;
                    padding: 0 1.7em 0 0.4em;
                    line-height: 2em;
                    height: 2em;
                }

                .mo-icon{
                    line-height: @fontSize*1.5;
                    font-size: @fontSize*0.75;
                }
            }
        }

        &.type-normal,
        &.type-compact{
            > .list > a{
                margin-left: @fontSize*0.125;
            }
        }

        &.type-compact{
            .list > .page-jump{
                .page-num > .textinput-wrap input{
                    font-size: @fontSize*0.8125;
                }

                .mo-icon{
                    line-height: @fontSize*1.5;
                }
            }
        }
    }

    &.co-t{
        .list > a{
            &.current{
                background-color: @colorTheme !important;
                border-color: @colorTheme !important;
            }
        }

        .page-jump .mo-icon:hover{
            color: @colorTheme !important;
        }
    }

    &.co-lt{
        .list > a{
            &.current{
                background-color: @colorLightTheme !important;
                border-color: @colorLightTheme !important;
            }
        }

        .page-jump .mo-icon:hover{
            color: @colorLightTheme !important;
        }
    }

    &.co-dt{
        .list > a{
            &.current{
                background-color: @colorDarkTheme !important;
                border-color: @colorDarkTheme !important;
            }
        }

        .page-jump .mo-icon:hover{
            color: @colorDarkTheme !important;
        }
    }

    &.co-s{
        .list > a{
            &.current{
                background-color: @colorSuccess !important;
                border-color: @colorSuccess !important;
            }
        }

        .page-jump .mo-icon:hover{
            color: @colorSuccess !important;
        }
    }

    &.co-w{
        .list > a{
            &.current{
                background-color: @colorWarning !important;
                border-color: @colorWarning !important;
            }
        }

        .page-jump .mo-icon:hover{
            color: @colorWarning !important;
        }
    }

    &.co-d{
        .list > a{
            &.current{
                background-color: @colorDanger !important;
                border-color: @colorDanger !important;
            }
        }

        .page-jump .mo-icon:hover{
            color: @colorDanger !important;
        }
    }

    &.co-p{
        .list > a{
            &.current{
                background-color: @colorPrimary !important;
                border-color: @colorPrimary !important;
            }
        }

        .page-jump .mo-icon:hover{
            color: @colorPrimary !important;
        }
    }

    &.co-m{
        .list > a{
            &.current{
                background-color: @colorMinor !important;
                border-color: @colorMinor !important;
            }
        }

        .page-jump .mo-icon:hover{
            color: @colorMinor !important;
        }
    }

    &.co-i{
        .list > a{
            &.current{
                background-color: @colorInfo !important;
                border-color: @colorInfo !important;
            }
        }

        .page-jump .mo-icon:hover{
            color: @colorInfo !important;
        }
    }

    &.co-bk{
        .list > a{
            &.current{
                background-color: @colorBlack !important;
                border-color: @colorBlack !important;
            }
        }

        .page-jump .mo-icon:hover{
            color: @colorBlack !important;
        }
    }

    each(range(11), {
        @colorName : 'colorNeutral@{value}';

        &.co-n@{value}{
            .list > a{
                &.current{
                    background-color: @@colorName !important;
                    border-color: @@colorName !important;
                    color: if((@value > 5), @colorWhite, @colorBlack) !important;
                }
            }

            .page-jump .mo-icon:hover{
                color: @@colorName !important;
            }
        }
    });

    &.co-wh{
        .list > a{
            &.current{
                background-color: @colorWhite !important;
                border-color: @colorWhite !important;
                color: @colorBlack !important;
            }
        }

        .page-jump .mo-icon:hover{
            color: @colorWhite !important;
        }
    }

    // default status
    &{
        .si-m;
        .co-t;
    }
}