.blink-frame(@opacity:1, @a:0) {
    opacity: @opacity;
    background: rgba(0,92,249,@a);
    border: 1px solid #00ffea;
}
@keyframes element-blink {
    0% {
        .blink-frame(0, 0);
    }
    25% {
        .blink-frame(1, 0.3);
    }
    50% {
        .blink-frame(0, 0);
    }
    75% {
        .blink-frame(1, 0.3);
    }
    100% {
        .blink-frame(0, 0);
    }
}

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

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

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

    text-align: left;
    // scale 的情况会导致过度锐化，看起来有点模糊
    // will-change: transform;

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

    &-frozen{
        pointer-events: none;
    }

    > .border-before {
        display: none;
        content: "";
        box-sizing: border-box;
        border: 1px solid #666;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
    }

    &:active{
        cursor: move;
    }

    &-selected{
        > .border-before{
            display: block;
            border-color: #6CCFFF;
            border-style: solid;
            border-width: 2px;
        }
    }


    .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();
    }

    .element-blink{
        border: 1px solid transparent;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        animation: 4s 0.5s element-blink;
    }
}

.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;
        transition: opacity .1s linear;
        opacity: 1;

        img {
            position: relative;
        }
    }
}

.editor-element-text,
.editor-element-styled-text{
    overflow: hidden;

    .element-inner{
        font-size: 0;
        width: 100%;
        height: 100%;
        position: relative;
        white-space: nowrap;
        writing-mode: horizontal-tb;
        transform-origin: 0 0;
    
        .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;
    }

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

.editor-element-styled-text {
    .styled-text-result {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        pointer-events: none;
    }
}

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

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

    .element-main canvas{
        .fllow-parent-rect();
        z-index: 1;
    }

    .element-mocker{
        background: no-repeat 0 0;
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }

    .mask-drop-area {
        border: 1px dashed #fff;
        border-radius: 4px;
        font-size:14px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 66px;
        background: rgba(51,51,51,0.6);
        border-radius: 4px;
        position: absolute;
        z-index: 3;
        transition: background .1s linear;
        &:after {
            content: "";
            position: absolute;
            background: #2254F4;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0;
            transition-property: left, top, right, bottom;
            transition-duration: .1s;
            transition-timing-function: linear;
            z-index: -1;
            border-radius: 4px;
        }
        svg {
            fill: #fff;
            width: 20px;
            height: 20px;
            margin-right: 6px;
        }
        &--small {
            font-size: 0;
            svg {
                margin-right: 0;
            }
        }
        &--active {
            color: #eef1f2;
            border: 1px solid #2254F4;
            background: #2254F4;
            &:after {
                opacity: 1;
                left: -4px;
                right: -4px;
                top: -4px;
                bottom: -4px;
            }
            &.mask-drop-area--small:after {
                display: none;
            }
            svg {
                fill: #eef1f2;
            }
        }
    }
}

.editor-element-collage {
    &:hover {
        &:before, &:after {
            display: none;
        }
    }
}

.editor-element-cell {
    &:hover {
        &:before, &:after {
            display: none;
        }
    }

    .element-main {
        overflow: hidden;

        &.element-main-empty {
            background: #fff;
            .icon-add-img {
                width: 18px;
                height: 18px;
                position: absolute;
                left: calc(50% ~"-" 9px);
                top: calc(50% ~"-" 9px);
                &:before,
                &:after {
                    content: "";
                    width: 100%;
                    height: 2px;
                    background: #a4c6ff;
                    position: absolute;
                    left: 0;
                    top: 8px;
                }
                &:after {
                    width: 2px;
                    height: 100%;
                    left: 8px;
                    top: 0;
                }
                &--small {
                    width: 10px;
                    height: 10px;
                    &:before {
                        height: 2px;
                        top: 4px;
                    }
                    &:after {
                        width: 2px;
                        left: 4px;
                    }
                }
            }
            .editor-element-cell--dragover-placeholder {
                border: 2px dashed #d1e0fc;
            }
        }

        .editor-element-cell--dragover-placeholder {
            border-color: transparent;
        }

        > svg {
            .fllow-parent-rect();
            g {
                transform-origin: 0 0;
            }
        }
    }
    &--dragover {
        .editor-element-cell--dragover-placeholder {
            background-color: rgba(0, 92, 249, .1);
            z-index: 1;
        }
    }
    &--dragover-placeholder {
        background-color: rgba(255, 255, 255, 0);
        transition: background-color .25s;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    &:hover {
        .editor-element-cell--dragover-placeholder {
            border: 2px solid #005cf9 !important;
        }
    }
}

.editor-element-styled-text,
.three-text {
    .element-tips-loading{
        position: absolute;
        width: 36px;
        height: 24px;
        top: 50%;
        left: 50%;
        border-radius: 11px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, .6);
        pointer-events: none;
        z-index: 1;

        .fa-spin, span, &:after {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            margin: 1px;
            font-size: 0;
            background: #ffffff;
            -webkit-animation: loading 1.2s ease infinite;
            animation: loading 1.2s ease infinite;
        }
        &:after {
            content: "";
        }
        .fa-spin {
            -webkit-animation-delay: -0.32s;;
            animation-delay: -0.32s;;
        }
        span {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }
        @keyframes loading {
            0%, 40%, 100% {
                opacity: 1;
                transform: translateY(0px);
            }
            60% {
                opacity: 0.3;
                transform: translateY(-4px);
            }
        }
    }
}

.editor-element-image, .editor-element-mask {
    .element-tips-rendering {
        .editor-element-styled-text>.element-tips-loading();
        margin-left: -18px;
        margin-top: -12px;
    }
}

.editor-element-threeText{
    .element-main {
        .three-text{
            .fllow-parent-rect();
            display: flex;
            justify-content: center;
            align-items: center;
            // overflow: hidden;
            canvas{
                flex-shrink: 0;
            }
        }
    }
}