.umb-editors {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.umb-editor {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: @brownGrayLight;
    z-index: @zIndexEditor;
}

.umb-editor--infinityMode {
    transform: none;
    will-change: transform;
    transition: transform 400ms ease-in-out;
    &.moveRight {
        transform: translateX(110%);
    }
}

.umb-editor--outOfRange {
    transform: none;
    display: none;
    will-change: auto;
    transition: display 0s 320ms;
}
.umb-editor--level0 {
    transform: none;
}
.umb-editor--level1 {
    transform: translateX(60px);
}
.umb-editor--level2 {
    transform: translateX(120px);
}
.umb-editor--level3 {
    transform: translateX(180px);
}

.umb-editor--n1 {
    right:60px;
}
.umb-editor--n2 {
    right:120px;
}
.umb-editor--n3 {
    right:180px;
}

// hide all infinite editors by default
// will be shown through animation
.umb-editors .umb-editor {
    box-shadow: 0px 0 30px 0 rgba(0,0,0,.3);
}

.umb-editor--small {
    width: 500px;
    will-change: transform;
    left: auto;
    
    .umb-editor-container {
        max-width: 500px;
    }
}

.umb-editor__overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    z-index: @zIndexEditor;
    visibility: hidden;
    opacity: 0;
    transition: opacity 320ms 20ms, visibility 0s 400ms;
}

#contentcolumn > .umb-editor__overlay,
.--notInFront .umb-editor__overlay {
    visibility: visible;
    opacity: 1;
    transition: opacity 320ms 20ms, visibility 0s;
}
