.editor-collage-editor {
    position: absolute;
    width: calc(100% ~'+' 2px);
    height: calc(100% ~'+' 2px);
    margin-left: -1px;
    margin-top: -1px;
    z-index: 6;
    &.line-dragging {
        cursor: ns-resize;
        .editor-element-cell-ghost {
            &:hover {
                border-color: transparent;
                svg {
                    display: none;
                }
            }
        }
        .editor-collage-h,
        .editor-collage-v {
            &:hover {
                opacity: 0;
            }
            &.line-dragging {
                opacity: 1;
            }
        }
    }
    &.line-dragging-v {
        cursor: ew-resize;
        .editor-element-cell-ghost {
            &:hover {
                border-color: transparent;
                svg {
                    display: none;
                }
            }
        }
        .editor-collage-h,
        .editor-collage-v {
            &:hover {
                opacity: 0;
            }
            &.line-dragging {
                opacity: 1;
            }
        }
    }
    &.img-dragging {
        cursor: move;
    }

    .editor-drag-gap-placeholder {
        position: absolute;
        background: rgba(0, 92, 249, 0.6);
    }

    .editor-collage-h,
    .editor-collage-v {
        overflow: hidden;
        position: absolute;
        z-index: 5;
        opacity: 0;
        min-width: 10px;
        min-height: 10px;
        &:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 92, 249, 0.6);
        }

        &:hover,
        &.line-dragging {
            opacity: 1;
        }
    }

    .editor-collage-h {
        cursor: ns-resize;
        &:after {
            max-height: 4px;
            top: 3px;
        }
        
    }
    .editor-collage-v {
        cursor: ew-resize;
        &:after {
            max-width: 4px;
            left: 3px;
        }
    }
    .editor-element-cell-ghosts {
        position: relative;
    }
    .editor-element-cell-ghost {
        position: absolute;
        border: 2px solid transparent;
        &:hover {
            border-color: #005cf9;
            svg {
                display: block;
            }
        }
        &.selected {
            border-color: #005cf9;
        }
    }
    &.transform-resizing {
        .editor-element-cell-ghost {
            &:hover {
                border-color: transparent;
            }
        }
    }
    .editor-element-cell--remover {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 6px;
        right: 6px;
        cursor: pointer;
        z-index: 2;
        svg {
            pointer-events: none;
            display: none;
        }
    }
    .editor-img-ghost {
        position: absolute;
        opacity: 0.6;
        line-height: 1;
        font-size: 0;
        z-index: 1;
        img {
            max-width: 100%;
        }
    }
    .editor-collage-dragger {
        width: 28px;
        height: 28px;
        background: #000;
        border-radius: 50%;
        cursor: move;
        position: absolute;
        top: calc(50% ~"-" 14px);
        right: -40px;
        text-align: center;
        line-height: 28px;
        font-size: 0;
        &:before {
            content: "";
            width: 12px;
            border-top: 1px dashed #666;
            position: absolute;
            left: -9px;
            top: 13px;
            z-index: -1;
        }
        svg {
            pointer-events: none;
            fill: #fff;
            width: 16px;
            vertical-align: middle;
        }
    }
}