@footerHeight: 50px;
@headerHeight: 50px;

mor-dialog{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: fixed;
    z-index: 999;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transition: 0.3s;

    > .mask{
        .setup-fullscreen-mask();
    }

    > .content{
        width: 50%;
        height: 50%;
        position: absolute;
        left: 50%;
        background-color: @colorWhite;
        box-sizing: border-box;
        border-radius: @borderRadius;
        overflow: hidden;

        > .body{
            position: absolute;
            overflow: auto;
            top: 0;
            bottom: 0;
            width: 100%;
            box-sizing: border-box;
            padding: @fontSize;

            .setup-scrollbar();
        }

        > header{
            font-size: @fontSize;
            line-height: @headerHeight;
            height: @headerHeight;
            width: 100%;
            padding: 0 1em;
            box-sizing: border-box;
            position: relative;

            h1{
                font-size: @fontSize;
                margin: 0;
                padding: 0;
                font-weight: 400;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            mor-link{
                position: absolute;
                top: 0;
                right: 1.5em;
                line-height: 3em;
                height: 3em;
                font-size: initial;
            }

            mor-link > .iconfont,
            mor-link > .mo-icon{
                font-size: initial;
            }
        }

        > footer{
            font-size: @fontSize*0.8125;
            line-height: @footerHeight;
            height: @footerHeight;
            width: 100%;
            background: @colorComponentItemBg;
            color: @colorComponentItemFont;
            padding: 0 1.5em;
            box-sizing: border-box;
            position: absolute;
            bottom: 0;
            text-align: left;
            border-top: 1px @colorComponentItemBorder solid;

            > div{
                position: relative;
            }

            .operate{
                position: absolute;
                right: 0;
                top: 0;

                > *{
                    margin-left: 0.2em;
                }
            }
        }
    }

    &.white-footer{
        > .content > footer{
            background: @colorWhite;
            border-top-color: @colorNeutral2;
            box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.06);
        }
    }

    &.has-footer > .content > .body{
        bottom: @footerHeight;
    }

    &.has-header > .content > .body{
        top: @headerHeight;
    }

    &.show-top{
        > .content{
            top: 0;
            transform: translateX(-50%) translateY(-100%) scale(1);
            opacity: 1;
            height: 200px;
            transition: 0.2s;
        }

        &.show{
            > .content{
                top: 3%;
                transform: translateX(-50%) translateY(0%) scale(1);
            }
        }
    }

    &.show-center{
        > .content{
            top: 50%;
            transform: translateX(-50%) translateY(-50%) scale(0.3);
            opacity: 0;
            transition: 0.26s;
        }

        &.show{
            > .content{
                transform: translateX(-50%) translateY(-50%) scale(1);
                opacity: 1;
            }
        }
    }

    &.show-no-animate{
        > .mask{
            transition: 0s;
        }

        > .content{
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            opacity: 0;
            transition: 0s;
        }

        &.show{
            > .content{
                opacity: 1;
            }
        }
    }

    &.show{
        pointer-events: auto;
        visibility: visible;

        > .mask{
            opacity: 1;
        }
    }

    &.co-t {
        > .content > header{
            background-color: @colorTheme;
            color: @colorWhite;
        }
    }

    &.co-lt {
        > .content > header{
            background-color: @colorLightTheme;
            color: @colorWhite;
        }
    }

    &.co-dt {
        > .content > header{
            background-color: @colorDarkTheme;
            color: @colorWhite;
        }
    }

    &.co-s {
        > .content > header{
            background-color: @colorSuccess;
            color: @colorWhite;
        }
    }

    &.co-w {
        > .content > header{
            background-color: @colorWarning;
            color: @colorWhite;
        }
    }

    &.co-d {
        > .content > header{
            background-color: @colorDanger;
            color: @colorWhite;
        }
    }

    &.co-p {
        > .content > header{
            background-color: @colorPrimary;
            color: @colorWhite;
        }
    }

    &.co-m {
        > .content > header{
            background-color: @colorMinor;
            color: @colorWhite;
        }
    }

    &.co-i {
        > .content > header{
            background-color: @colorInfo;
            color: @colorWhite;
        }
    }

    &.co-bk {
        > .content > header{
            background-color: @colorBlack;
            color: @colorWhite;
        }
    }

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

        &.co-n@{value}{
            > .content > header{
                background-color: @@colorName;
                color: if((@value > 5), @colorWhite, @colorNeutral11);
            }
        }
    });

    &.co-wh {
        > .content > header{
            background-color: @colorWhite;
            color: @colorNeutral11;
        }
    }

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