.fllow-parent-rect() {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.gmage-editor-element{
    background: no-repeat 50% 50%;
    line-height: 1;
    position: absolute;

    // 此处必须指定， phantomjs 渲染可能有 BUG 会导致层级有问题
    z-index: 1;

    text-align: left;
    will-change: transform;

    &-lock{
        cursor: no-drop;
    }

    &-hidden,
    &-editing{
        visibility: hidden;
    }

    &-frozen{
        pointer-events: none;

        &:hover{
            &:before,
            &:after{
                display: none;
            }
        }
    }

    &:before,
    &:after{
        display: none;
        content: "";
        box-sizing: border-box;
        border: 1px dashed #666;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }
    &:hover{
        &:before{
            display: block;
            border-style: solid;
        }
        &:after{
            display: block;
            border-color: #FFF;
        }
    }

    &-selected{
        &:before{
            display: block;
            border-color: #666;
            border-style: solid;
        }
        &:after{
            display: block;
            border-style: dashed;
            border-color: #FFF;
        }
    }

    .element-tips-error,
    .element-tips-loading{
        display: none; // default hidden
        position: absolute;
        z-index: 2;

        pointer-events: none;

        i{
            // color: #999;
            margin: -2px .5em 0 0;
            opacity: .8;
        }
    }

    .element-main{
        .fllow-parent-rect();
    }
}

.gmage-editor-element-image{
    .element-main{
        background-repeat: no-repeat;

        image-rendering: optimizeSpeed;             /*                     */
        image-rendering: -moz-crisp-edges;          /* Firefox             */
        image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
        image-rendering: optimize-contrast;         /* CSS3 Proposed       */

        overflow: hidden;

        img {
            position: relative;
        }
    }
}

.gmage-editor-element-text{
    overflow: hidden;

    .element-inner{
        font-size: 0;
        width: 100%;
        height: 100%;
        position: relative;
        white-space: nowrap;
        writing-mode: horizontal-tb;

        .elment-inner-content {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;

            &:before {
                display: inline-block;
                content: "";
                height: 100%;
                width: 0;
                vertical-align: middle;
            }

            &.middle-h{
                &:before{
                    width: 0;
                    height: 100%;
                }
            }

            &.middle-v{
                writing-mode: vertical-rl;

                &:before{
                    width: 100%;
                    height: 0;
                }
            }
        }

        .element-main {
            display: inline-block;
            vertical-align: top;
        }
    }

    .element-main{
        cursor: default;
        min-height: 1.2em;
        min-width: 1em;
        height: auto;
        width: auto;
        position: relative;
        white-space: normal;
        word-wrap: break-word;

        outline: 0;
        transform-origin: 0 0;
    }
    &.gmage-editor-element-lock .element-main{
        cursor: no-drop;
    }

    // &.gmage-editor-element-loading{
    //     .element-main{
    //         visibility: hidden;
    //     }
    // }

    &.gmage-editor-element-editing{
        &:hover{
            outline: none;
        }
    }
}

.gmage-editor-element-svg{
    .element-main svg{
        .fllow-parent-rect();
    }
}

.gmage-editor-element-mask{
    .element-main{
        overflow: hidden;
    }

    .element-main canvas{
        .fllow-parent-rect();
    }

    .element-mocker{
        background: no-repeat 0 0;
        background-size: 100% 100%;
    }
}