@mixin displayMarquee($c) {
    > .c-frame-edit {
        // All other frames
        //@include test($c, 0.4);
        display: block;
    }
    > .c-frame > .c-frame-edit {
        // Line object frame
        //@include test($c, 0.4);
        display: block;
    }
}

.l-layout {
    @include abs();
    display: flex;
    flex-direction: column;
    overflow: auto;

    &__grid-holder {
        display: none;
    }

    &__frame {
        position: absolute;
    }
}

.is-editing {
    .l-shell__main-container {
        &[s-selected],
        &[s-selected-parent] {
            // Display grid and allow edit marquee to display in main layout holder when editing
            > .l-layout {
                background: $editUIGridColorBg;

                > [class*="__grid-holder"] {
                    display: block;
                }
            }
        }
    }

    .l-layout__frame {
        &[s-selected],
        &[s-selected-parent] {
            // Display grid and allow edit marquee to display in nested layouts when editing
            > * > * > .l-layout {
                background: $editUIGridColorBg;
                box-shadow: inset $editUIGridColorFg 0 0 2px 1px;

                > [class*='grid-holder'] {
                    display: block;
                }
            }
        }
    }

    /*********************** EDIT MARQUEE CONTROL */
    *[s-selected-parent] {
        > .l-layout {
            // When main shell layout is the parent
            @include displayMarquee(deeppink);
        }
        > * > * > * {
            // When a sub-layout is the parent
            @include displayMarquee(blue);
        }
    }
}
