mor-imagemap{
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: relative;

    .setup-form();

    .imagemap-operate{
        display: block;
        color: @colorFormAddonFont;
        background: @colorFormAddonBg;
        text-align: center;
        margin-top: -2px;
        border: 1px @colorFormBorder solid;
        box-sizing: border-box;
        z-index: 1;
        position: relative;
        border-radius: 0 0 @borderRadius @borderRadius;
        vertical-align: top;
        font-size: @fontSize*0.8125;

        > span{
            display: inline-block;
            padding: 0.2em 0;
            width: 100%;
        }

        .mo-icon{
            font-size: @fontSize*0.8125;
            vertical-align: top;
        }

        &:hover{
            text-decoration: none;
            color: @colorFormAddonFontHover;
            background: @colorFormAddonBgHover;
            cursor: pointer;
        }

        &.loading:hover{
            cursor: default;
            color: @colorFormAddonFontHover;
            background: @colorFormAddonBgHover;
        }
    }

    &.st-normal{}

    &.st-disabled,
    &.st-readonly{
        .imagemap-operate{
            border-color: @colorFormBorderDisable;
            background: @colorFormBackgroundDisable;

            &:hover{
                color: @colorFormAddonFont;
            }
        }
    }

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

.mor-imagemap-map{
    .maparea{
        width: 100%;
        user-select: none;
        position: relative;
        font-size: 0;
        margin: 0 auto;

        img{
            width: 100%;
        }

        .setup-scrollbar();
    }

    .zonearea{
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        cursor: crosshair;
        font-size: @fontSize*0.875;
        border: 1px @colorFormBorder solid;
        box-sizing: content-box;

        &.disable-add-spot{
            cursor: default;
        }

        &.over-range{
            box-shadow: 0 0 6px rgba(214, 68, 49, 0.55) inset;
            border-color: @colorDanger;
        }

        &.resize-top,
        &.resize-top .zone,
        &.resize-top .zone > div{
            cursor: n-resize !important;
        }

        & .zone .top{
            cursor: n-resize;
        }

        &.resize-bottom,
        &.resize-bottom .zone,
        &.resize-bottom .zone > div{
            cursor: s-resize !important;
        }

        & .zone .bottom{
            cursor: s-resize;
        }

        &.resize-left,
        &.resize-left .zone,
        &.resize-left .zone > div{
            cursor: w-resize !important;
        }

        & .zone .left{
            cursor: w-resize;
        }

        &.resize-right,
        &.resize-right .zone,
        &.resize-right .zone > div{
            cursor: e-resize !important;
        }

        & .zone .right{
            cursor: e-resize;
        }

        &.resize-topleft,
        &.resize-topleft .zone,
        &.resize-topleft .zone > div{
            cursor: nw-resize !important;
        }

        & .zone .topleft{
            cursor: nw-resize;
        }

        &.resize-topright,
        &.resize-topright .zone,
        &.resize-topright .zone > div{
            cursor: ne-resize !important;
        }

        & .zone .topright{
            cursor: ne-resize;
        }

        &.resize-bottomleft,
        &.resize-bottomleft .zone,
        &.resize-bottomleft .zone > div{
            cursor: sw-resize !important;
        }

        & .zone .bottomleft{
            cursor: sw-resize;
        }

        &.resize-bottomright,
        &.resize-bottomright .zone,
        &.resize-bottomright .zone > div{
            cursor: se-resize !important;
        }

        & .zone .bottomright{
            cursor: se-resize;
        }
    }

    .zone{
        box-sizing: border-box;
        border: 1px dashed @colorNeutral10;
        position: absolute;
        display: block;
        background-color: %(~'%d40', @colorNeutral10);
        cursor: move;

        &.resize-top{
            border-top-style: solid !important;
            border-top-color: darken(@colorDanger, 10%) !important;
        }

        &.resize-bottom{
            border-bottom-style: solid !important;
            border-bottom-color: darken(@colorDanger, 10%) !important;
        }

        &.resize-left{
            border-left-style: solid !important;
            border-left-color: darken(@colorDanger, 10%) !important;
        }

        &.resize-right{
            border-right-style: solid !important;
            border-right-color: darken(@colorDanger, 10%) !important;
        }

        &.resize-topleft{
            border-top-style: solid !important;
            border-top-color: darken(@colorDanger, 10%) !important;
            border-left-style: solid !important;
            border-left-color: darken(@colorDanger, 10%) !important;
        }

        &.resize-bottomleft{
            border-bottom-style: solid !important;
            border-bottom-color: darken(@colorDanger, 10%) !important;
            border-left-style: solid !important;
            border-left-color: darken(@colorDanger, 10%) !important;
        }

        &.resize-topright{
            border-top-style: solid !important;
            border-top-color: darken(@colorDanger, 10%) !important;
            border-right-style: solid !important;
            border-right-color: darken(@colorDanger, 10%) !important;
        }

        &.resize-bottomright{
            border-bottom-style: solid !important;
            border-bottom-color: darken(@colorDanger, 10%) !important;
            border-right-style: solid !important;
            border-right-color: darken(@colorDanger, 10%) !important;
        }

        &:hover,
        &.resize{
            border: 1px dashed @colorNeutral11;
            background-color: %(~'%d30', darken(@colorPrimary, 5%));
            border-width: 2px;
        }

        &.move-moving{
            display: none;
        }

        .top,
        .bottom{
            position: absolute;
            left: 0;
            width: 100%;
            height: 20px;
        }

        .top{
            top: -10px;
        }

        .bottom{
            bottom: -10px;
            z-index: 3;
        }

        .left,
        .right{
            position: absolute;
            top: 0;
            height: 100%;
            width: 20px;
        }

        .left{
            left: -10px;
        }

        .right{
            right: -10px;
            z-index: 3;
        }

        .topleft,
        .topright,
        .bottomleft,
        .bottomright{
            position: absolute;
            width: 20px;
            height: 20px;
            z-index: 4;
        }

        .topleft{
            top: -10px;
            left: -10px;
        }

        .topright{
            top: -10px;
            right: -10px;
        }

        .bottomleft{
            bottom: -10px;
            left: -10px;
        }

        .bottomright{
            bottom: -10px;
            right: -10px;
            z-index: 10;
        }
    }

    .content .imagemap-dialog-footer{
        z-index: 2;
        position: relative;
        height: 100%;

        .clean-allzone-btn{
            margin-right: 6px;
        }

        .note{
            font-size: @fontSize*0.75;
            line-height: 1.2em;
            display: block;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    &.imagemap-disabled{
        .zonearea{
            cursor: default;

            .zone{
                cursor: default;

                .top,
                .bottom,
                .left,
                .right,
                .topleft,
                .topright,
                .bottomleft,
                .bottomright{
                    cursor: default !important;
                }
            }
        }
    }
}