@sizeName: xxl, xl, l, m, s, xs, xxs;
@sizeFontSize: 1.3, 1.1, 1, 0.9375, 0.875, 0.75, 0.75;
@sizeIFontSize: 2.2, 1.8, 1.6, 1.4, 1.2, 1, 0.75;
@sizeMloaderWidth: 1.6em, 1.4em, 1.3em, 1.2em, 1.2em, 1.2em, 1em;
@sizeBtnHeight: 58px, 50px, 42px, 36px, 32px, 24px, 20px;
@colorName: t, lt, dt, s, w, d, p, m, i, bk, wh;
@colorMainColor: @colorTheme, @colorLightTheme, @colorDarkTheme, @colorSuccess, @colorWarning, @colorDanger, @colorPrimary, @colorMinor, @colorInfo, @colorBlack, @colorWhite;
@btnSizeMinWidth: 160px, 140px, 120px, 100px, 80px, 60px, 50px;

.setup-color(@selector, @colorHex, @name) {
    @{selector} {
        background-color: @colorHex;
        color: if((@name = wh or @name = n1 or @name = n2 or @name = n3 or @name = n4 or @name = n5), @colorBlack, @colorWhite);

        .mo-loader{
            .mo-loader-path{
                stroke: if((@name = wh or @name = n1 or @name = n2 or @name = n3 or @name = n4 or @name = n5), @colorNeutral10, @colorWhite);
            }
        }

        &.plain,
        &.ghost{
            color: @colorHex;
            border-color: @colorHex;

            .mo-loader{
                .mo-loader-path{
                    stroke: @colorHex;
                }
            }
        }

        & when (@name = wh), (@name = n1), (@name = n2), (@name = n3), (@name = n4), (@name = n5){
            &.plain,
            &.ghost {
                color: @colorWhite;
            }
        }

        & when (@name = bk), (@name = n6), (@name = n7), (@name = n8), (@name = n9), (@name = n10), (@name = n11) {
            &.plain,
            &.ghost {
                color: @colorBlack;
            }
        }

        &:not(.st-disabled):not(.st-readonly):hover,
        &.st-hover{
            background-color: if((@name = wh or @name = n1 or @name = n2 or @name = n3 or @name = n4 or @name = n5), darken(@colorHex, 7%), lighten(@colorHex, 7%));

            &.plain{
                color: if((@name = wh or @name = n1 or @name = n2 or @name = n3 or @name = n4 or @name = n5), @colorBlack, @colorWhite);
                background-color: @colorHex;

                .mo-loader{
                    .mo-loader-path{
                        stroke: if((@name = wh or @name = n1 or @name = n2 or @name = n3 or @name = n4 or @name = n5), @colorBlack, @colorWhite);
                    }
                }
            }
        }

        &:not(.st-disabled):not(.st-readonly):active,
        &.st-active{
            background-color: if((@name = wh or @name = n1 or @name = n2 or @name = n3 or @name = n4 or @name = n5), darken(@colorHex, 12%), desaturate(@colorHex, 12%));

            &.plain{
                background-color: darken(@colorHex, 10%);
                border-color: darken(@colorHex, 10%);
            }
        }

        &:not(.plain):not(.ghost).st-disabled,
        &:not(.plain):not(.ghost).st-readonly{
            border: none;
        }

        &.st-disabled,
        &.st-readonly{
            opacity: 0.5;
        }
    }
};

mor-btn{
    display: inline-block;
    padding: 0 1.1em;
    border-radius: 0.3em;
    position: relative;
    height: 2.8em;
    line-height: calc(2.8em + 2px);
    box-sizing: border-box;
    text-align: center;

    > i,
    > .mo-icon,
    > .iconfont{
        vertical-align: middle;
    }

    &:hover{
        cursor: pointer;
    }

    &.plain,
    &.ghost{
        border: 1px #FFF solid;
    }

    &.round{
        border-radius: 100em;
    }

    &.circle{
        width: 2.8em;
        overflow: hidden;
        border-radius: 100em;
        padding: 0;
        text-align: center;
        position: relative;

        > i{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        > mor-img{
            width: 100%;
            height: 100%;

            > img{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

        &:not(.st-disabled):not(.st-readonly):hover,
        &.st-hover{
            > mor-img::after{
                content: ' ';
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.15);
                position: absolute;
                left: 0;
                top: 0;
            }
        }

        &:not(.st-disabled):not(.st-readonly):active,
        &.st-active{
            > mor-img::after{
                content: ' ';
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.25);
                position: absolute;
                left: 0;
                top: 0;
            }
        }
    }

    &.loading{
        .mo-loader{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            .mo-loader-path{
                opacity: 0.85;
            }
        }

        span{
            opacity: 0;
        }

        &:hover{
            cursor: default;
        }
    }

    each(@sizeName, {
        & when(@value = m) {
            height: extract(@sizeBtnHeight, @index);
            line-height: extract(@sizeBtnHeight, @index);
            font-size: @fontSize*extract(@sizeFontSize, @index);

            &.circle{
                width: extract(@sizeBtnHeight, @index);
            }

            > i{
                font-size: @fontSize*extract(@sizeIFontSize, @index);
            }

            .mo-loader{
                width: extract(@sizeMloaderWidth, @index);
            }

            &.min-width{
                min-width: extract(@btnSizeMinWidth, @index);
            }
        }

        &.si-@{value}{
            height: extract(@sizeBtnHeight, @index);
            line-height: extract(@sizeBtnHeight, @index);
            font-size: @fontSize*extract(@sizeFontSize, @index);

            &.circle{
                width: extract(@sizeBtnHeight, @index);
            }

            > i{
                font-size: @fontSize*extract(@sizeIFontSize, @index);
            }

            .mo-loader{
                width: extract(@sizeMloaderWidth, @index);
            }

            &.min-width{
                min-width: extract(@btnSizeMinWidth, @index);
            }
        }
    });

    &.si-s{
        padding: 0 0.8em;
    }

    &.si-xs{
        padding: 0 0.6em;
    }

    &.si-xxs{
        padding: 0 0.4em;
    }

    each(@colorName, {
        & when(@value = t) {
            .setup-color(~'&', extract(@colorMainColor, @index), @value);
        }

        .setup-color(e(%('&.co-%S', @value)), extract(@colorMainColor, @index), @value);
    });

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

        .setup-color(e(%('&.co-n%S', @value)), @@colorName, e(%('n%S', @value)));

        &.co-n@{value}{
            &.plain,
            &.ghost:not(.st-disabled):not(.st-readonly):hover,
            &.ghost.st-hover{
                background-color: if((@value > 5), lighten(@@colorName, 25%), darken(@@colorName, 35%));
            }

            &.ghost:not(.st-disabled):not(.st-readonly):active,
            &.ghost.st-active{
                background-color: if((@value > 5), lighten(@@colorName, 20%), darken(@@colorName, 30%));
            }

            &:not(.plain):not(.ghost).st-disabled,
            &:not(.plain):not(.ghost).st-readonly{
                color: if((@value > 5), lighten(@@colorName, 40%), darken(@@colorName, 30%));
            }
        }
    });

    &.co-t{
        &.plain,
        &.ghost:not(.st-disabled):not(.st-readonly):hover,
        &.ghost.st-hover{
            background-color: lighten(@colorTheme, 35%);
        }

        &.ghost:not(.st-disabled):not(.st-readonly):active,
        &.ghost.st-active{
            background-color: lighten(@colorTheme, 32%);
        }

        &:not(.plain):not(.ghost).st-disabled,
        &:not(.plain):not(.ghost).st-readonly{
            color: lighten(@colorTheme, 25%);
        }
    }

    &.co-lt{
        &.plain,
        &.ghost:not(.st-disabled):not(.st-readonly):hover,
        &.ghost.st-hover{
            background-color: lighten(@colorLightTheme, 25%);
        }

        &.ghost:not(.st-disabled):not(.st-readonly):active,
        &.ghost.st-active{
            background-color: lighten(@colorLightTheme, 20%);
        }

        &:not(.plain):not(.ghost).st-disabled,
        &:not(.plain):not(.ghost).st-readonly{
            color: lighten(@colorLightTheme, 20%);
        }
    }

    &.co-dt{
        &.plain,
        &.ghost:not(.st-disabled):not(.st-readonly):hover,
        &.ghost.st-hover{
            background-color: lighten(@colorDarkTheme, 35%);
        }

        &.ghost:not(.st-disabled):not(.st-readonly):active,
        &.ghost.st-active{
            background-color: lighten(@colorDarkTheme, 30%);
        }

        &:not(.plain):not(.ghost).st-disabled,
        &:not(.plain):not(.ghost).st-readonly{
            color: lighten(@colorDarkTheme, 25%);
        }
    }

    &.co-s{
        &.plain,
        &.ghost:not(.st-disabled):not(.st-readonly):hover,
        &.ghost.st-hover{
            background-color: lighten(@colorSuccess, 56%);
        }

        &.ghost:not(.st-disabled):not(.st-readonly):active,
        &.ghost.st-active{
            background-color: lighten(@colorSuccess, 50%);
        }

        &:not(.plain):not(.ghost).st-disabled,
        &:not(.plain):not(.ghost).st-readonly{
            color: lighten(@colorSuccess, 35%);
        }
    }

    &.co-w{
        &.plain,
        &.ghost:not(.st-disabled):not(.st-readonly):hover,
        &.ghost.st-hover{
            background-color: lighten(@colorWarning, 41%);
        }

        &.ghost:not(.st-disabled):not(.st-readonly):active,
        &.ghost.st-active{
            background-color: lighten(@colorWarning, 36%);
        }

        &:not(.plain):not(.ghost).st-disabled,
        &:not(.plain):not(.ghost).st-readonly{
            color: lighten(@colorWarning, 35%);
        }
    }

    &.co-d{
        &.plain,
        &.ghost:not(.st-disabled):not(.st-readonly):hover,
        &.ghost.st-hover{
            background-color: lighten(@colorDanger, 40%);
        }

        &.ghost:not(.st-disabled):not(.st-readonly):active,
        &.ghost.st-active{
            background-color: lighten(@colorDanger, 35%);
        }

        &:not(.plain):not(.ghost).st-disabled,
        &:not(.plain):not(.ghost).st-readonly{
            color: lighten(@colorDanger, 35%);
        }
    }

    &.co-p{
        &.plain,
        &.ghost:not(.st-disabled):not(.st-readonly):hover,
        &.ghost.st-hover{
            background-color: lighten(@colorPrimary, 38%);
        }

        &.ghost:not(.st-disabled):not(.st-readonly):active,
        &.ghost.st-active{
            background-color: lighten(@colorPrimary, 33%);
        }

        &:not(.plain):not(.ghost).st-disabled,
        &:not(.plain):not(.ghost).st-readonly{
            color: lighten(@colorPrimary, 30%);
        }
    }

    &.co-m{
        &.ghost,
        &.plain{
            color: @colorNeutral10;
            border-color: lighten(@colorMinor, 15.5%);
        }

        &.plain{
            background-color: lighten(@colorMinor, 27%);
        }

        &.plain{
            &:not(.st-disabled):not(.st-readonly):hover,
            &.st-hover{
                background-color: @colorMinor;
                border-color: @colorMinor;
            }

            &:not(.st-disabled):not(.st-readonly):active,
            &.st-active{
                background-color: darken(@colorMinor, 5%);
            }
        }

        &.ghost{
            &:not(.st-disabled):not(.st-readonly):hover,
            &.st-hover{
                background-color: lighten(@colorMinor, 27%);
            }

            &:not(.st-disabled):not(.st-readonly):active,
            &.st-active{
                background-color: lighten(@colorMinor, 25%);
                color: @colorNeutral10;
            }
        }

        &:not(.plain):not(.ghost).st-disabled,
        &:not(.plain):not(.ghost).st-readonly{
            color: lighten(@colorMinor, 20%);
        }

        &.plain.st-disabled,
        &.plain.st-readonly,
        &.ghost.st-disabled,
        &.ghost.st-readonly{
            color: lighten(@colorMinor, 10%);
            opacity: 0.9;
        }
    }

    &.co-i{
        &.plain,
        &.ghost:not(.st-disabled):not(.st-readonly):hover,
        &.ghost.st-hover{
            background-color: lighten(@colorInfo, 48%);
        }

        &.ghost:not(.st-disabled):not(.st-readonly):active,
        &.ghost.st-active{
            background-color: lighten(@colorInfo, 43%);
        }

        &:not(.plain):not(.ghost).st-disabled,
        &:not(.plain):not(.ghost).st-readonly{
            color: lighten(@colorInfo, 30%);
        }
    }

    &.co-bk{
        &.plain,
        &.ghost:not(.st-disabled):not(.st-readonly):hover,
        &.ghost.st-hover{
            background-color: lighten(@colorBlack, 55%);
            border-color: @colorBlack;
        }

        &:not(.st-disabled):not(.st-readonly):hover,
        &.st-hover{
            background-color: lighten(@colorBlack, 25%);
        }

        &:not(.st-disabled):not(.st-readonly):active,
        &.st-active{
            background-color: lighten(@colorBlack, 15%);
        }

        &.ghost:not(.st-disabled):not(.st-readonly):active,
        &.ghost.st-active{
            background-color: lighten(@colorBlack, 50%);
        }

        &:not(.plain):not(.ghost).st-disabled,
        &:not(.plain):not(.ghost).st-readonly{
            color: lighten(@colorBlack, 40%);
        }
    }

    &.co-wh{
        &.plain,
        &.ghost:not(.st-disabled):not(.st-readonly):hover,
        &.ghost.st-hover{
            background-color: darken(@colorWhite, 30%);
            border-color: darken(@colorWhite, 3%);
        }

        &:not(.st-disabled):not(.st-readonly):hover,
        &.st-hover{
            background-color: darken(@colorWhite, 6%);

            &.plain,
            &.ghost{
                color: @colorNeutral10;
            }
        }

        &:not(.st-disabled):not(.st-readonly):active,
        &.st-active{
            background-color: darken(@colorWhite, 15%);
        }

        &.ghost:not(.st-disabled):not(.st-readonly):active,
        &.ghost.st-active{
            background-color: darken(@colorWhite, 25%);
        }

        &:not(.plain):not(.ghost).st-disabled,
        &:not(.plain):not(.ghost).st-readonly{
            color: darken(@colorWhite, 30%);
        }
    }

    &.ghost{
        background-color: transparent;
    }

    &.fade{
        filter: grayscale(1);

        &:hover,
        &:active,
        &.st-hover,
        &.st-active{
            filter: grayscale(0);
        }
    }

    &.st-normal{}

    &.st-hover{}

    &.st-disabled,
    &.st-readonly{
        // box-shadow: 0 0 5px rgba(0, 0, 0, 0.6) inset;
        cursor: not-allowed;
    }

    &.st-apparent{
        animation-name: apparent;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;

        &:hover{
            animation-name: none;
        }
    }

    // default status
    &{
        .co-t;
        .st-normal;
    }
}