// The row editor
.editor.row {
    position: absolute;
    width: 100%;
    right: 25px;
    left: 5px;
    z-index:11;
    min-height: 10px;

    pointer-events: none;
    .editing-body { pointer-events: none; }
    .fields   { pointer-events: all;  }
    .controls { pointer-events: none; }
    .buttons  { pointer-events: all;  }

    label { display: none; }

    .fields {
        flex-direction: row;
        background: $editor-background;
        .value {
            width: 100%;
            height: 35px;
            border-radius: 5px;
            flex: 1;
            .rw-input { height: 35px; }
        }
        .field {
            &.center input { text-align: center; }
            &.right  input { text-align: right;  }
        }
        .lanes-field, .form-group {
            flex: 1;
            display: flex;
            align-items: center;
            margin: 0;
        }
    }
    .controls .buttons {
        background: $editor-background;
        padding: 2px 8px 8px 8px;
        position: relative;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;

        button {
            margin-left: 20px;
            &:first-child {
                margin-left: 0;
            }
        }
        // http://css-tricks.com/better-tabs-with-round-out-borders/
        &:before,
        &:after {
            position: absolute;
            top: -1px;
            width: 7px;
            height: 6px;
            content: " ";
        }
        &:before {
            left: -7px;
            border-top-right-radius: 6px;
            border-width: 1px 1px 0px 0px;
            box-shadow: 3px 0px 0px $editor-background;
        }
        &:after {
            right: -7px;
            border-top-left-radius: 6px;
            border-width: 1px 0px 0px 1px;
            box-shadow: -3px 0px 0px $editor-background;
        }
    }
}