// transparent
.transparent(@width, @color-main:#ccc, @color-assist:#fff) {
    background-color: @color-assist;
    background-size: 2*@width 2*@width;
    background-position: 0 0, @width @width;
    background-image: -webkit-linear-gradient(bottom left, @color-main 25%, transparent 25%, transparent 75%, @color-main 75%, @color-main), -webkit-linear-gradient(bottom left, @color-main 25%, transparent 25%, transparent 75%, @color-main 75%, @color-main);
    background-image: linear-gradient(to top right, @color-main 25%, transparent 25%, transparent 75%, @color-main 75%, @color-main), linear-gradient(to top right, @color-main 25%, transparent 25%, transparent 75%, @color-main 75%, @color-main);
}

// icon
.icon(@name; @fill:#757575) {
    display: inline-block;

    @path: "./assets/svg/@{name}.svg";
    background-image: svg-load(@path, fill=@fill);

    // background-image: url("../assets/slice/icon-@{name}.png");
    // background-image: -webkit-image-set(url("../assets/slice/icon-@{name}.png") 1x, url("../assets/slice/icon-@{name}@2x.png") 2x);
    // background-image: -moz-image-set(url("../assets/slice/icon-@{name}.png") 1x, url("../assets/slice/icon-@{name}@2x.png") 2x);
    // background-image: image-set(url("../assets/slice/icon-@{name}.png") 1x, url("../assets/slice/icon-@{name}@2x.png") 2x);
}

// container
.editor-container{
    background: none;
    color: #333;
    font: 14px/1.5 Arial, "STHeitiSC-Light", "Helvetica Neue";
    overflow: auto;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    z-index: 1;

    .hide{
        display: none;
    }

    // icon
    [class|="icon"],
    [class*=" icon-"] {
        display: inline-block;
        background: no-repeat 50% 50%;
        vertical-align: top;
    }
}

.editor-container,
.editor-container *,
.editor-container :after,
.editor-container :before{
    box-sizing: border-box;
    padding: 0;
}



// shell
.editor-shell-wrap{
    box-sizing: content-box;
    margin: 0 auto;
    overflow: visible;
    position: relative;
}

.editor-shell{
    background: no-repeat 0 0;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, .2);
    font: 14px/1.5 Arial,Simsun;
    margin: 0 auto;
    position: relative;

    &.editor-overflow-mask {
        &::after {
                content: ' ';
                position: absolute;
                z-index: 1;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
                pointer-events: none;
            }
        .editor-canvas {
            overflow: visible;
        }
    }
}

.editor-tips[editor-aria-label] {
    &::after, &::before {
        display: none;
        position: absolute;
        pointer-events: none;
        top: 100%;
        left: 50%;
    }
    &:hover {
        z-index: 999;
        
        &::before {
            display: block;
            border: 5px solid transparent;
            border-bottom-color: rgba(0,0,0,.7);
            color: rgba(0,0,0,.8);
            content: "";
            margin: 3px 0 0 -5px;
            height: 0;
            width: 0;
            z-index: 999;
        }
        &::after {
            display: block;
            font-style: normal;
            background: rgba(0,0,0,.7);
            border-radius: 3px;
            color: #fff;
            content: attr(editor-aria-label);
            font-size: .8em;
            margin-top: 13px;
            padding: 5px 8px;
            text-align: center;
            word-wrap: break-word;
            white-space: pre;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            -webkit-font-smoothing: subpixel-antialiased;
            z-index: 1;
        }
    }
}