/******************************* SHELL */
.l-shell {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-flow: column nowrap;
    overflow: hidden;

    &__pane-tree {
        width: 40%;

        [class*="collapse-button"] {
            // For mobile, collapse button becomes menu icon
            body.mobile & {
                @include cClickIconButton();
                color: $colorKey !important;
                position: absolute;
                right: -2 * nth($shellPanePad, 2); // Needs to be -1 * when pane is collapsed
                top: 0;
                transform: translateX(100%);
                width: $mobileMenuIconD;
                z-index: 2;

                &:before {
                    content: $glyph-icon-menu-hamburger;
                }
            }
        }
    }

    &__pane-tree,
    &__pane-inspector,
    &__pane-main {
        .l-pane__contents {
            display: flex;
            flex-flow: column nowrap;
            overflow-x: hidden;

            > * {
                flex: 0 0 auto;
                + * {
                    margin-top: $interiorMarginLg;
                }
            }
        }
    }

    body.mobile & {
        &__pane-tree {
            background: linear-gradient(90deg, transparent 70%, rgba(black, 0.2) 99%, rgba(black, 0.3));

            &[class*="--collapsed"] {
                [class*="collapse-button"] {
                    right: -1 * nth($shellPanePad, 2);
                }
            }
        }
    }

    body.phone.portrait & {
        &__pane-tree {
            width: calc(100% - #{$mobileMenuIconD + (2 * nth($shellPanePad, 2))});

            + .l-pane {
                // Hide pane-main when this pane is expanded
                opacity: 0;
                pointer-events: none;
            }

            &[class*="--collapsed"] + .l-pane {
                // Show pane-main when tree is collapsed
                opacity: 1;
                pointer-events: inherit;
                transition: opacity 250ms ease 250ms;
            }
        }
    }

    &__head,
    &__pane-inspector {
        body.mobile & {
            display: none;
        }
    }

    &__head,
    &__status {
        flex: 0 0 auto;
        display: flex;
    }

    /******************************* HEAD */
    &__main-view-browse-bar {
        flex: 0 0 auto;
    }

    body.mobile & .l-shell__main-view-browse-bar {
        margin-left: $mobileMenuIconD; // Make room for the hamburger!
    }

    &__head {
        align-items: stretch;
        background: $colorHeadBg;
        justify-content: space-between;
        padding: $interiorMargin $interiorMargin + 2;

        > [class*="__"] + [class*="__"] {
            margin-left: $interiorMargin;
        }

        [class*='__head__collapse-button'] {
            align-self: start;
            flex: 0 0 auto;
            margin-top: 6px;

            &:before {
                content: $glyph-icon-arrow-down;
                font-size: 1.1em;
            }
        }

        &-section {
            // Subdivides elements across the head
            display: flex;
            flex: 0 1 auto;
            padding: 0 $interiorMargin;
        }

        &--expanded {
            .c-indicator__label {
                transition: none !important;
            }

            [class*='__head__collapse-button'] {
                &:before {
                    transform: rotate(180deg);
                }
            }
        }
    }

    &__controls {
        $brdr: 1px solid $colorInteriorBorder;
        border-right: $brdr;
        border-left: $brdr;
        align-items: start;
    }

    &__create-button,
    &__app-logo {
        flex: 0 0 auto;
    }

    &__create-button { margin-right: $interiorMarginLg; }

    &__indicators {
        flex: 1 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        [class*='indicator-clock'] { order: 90; }

        .c-indicator .label {
            font-size: 0.9em;
        }
    }

    /******************************* MAIN AREA */
    &__main-container {
        // Wrapper for main views
        flex: 1 1 auto !important;
        height: 0; // Chrome 73 overflow bug fix
        overflow: auto;
    }

    &__tree {
        // Tree component within __pane-tree
        flex: 1 1 auto !important;
    }

    &__time-conductor {
        border-top: 1px solid $colorInteriorBorder;
        padding-top: $interiorMargin;
    }

    &__main {
        > .l-pane {
            padding: nth($shellPanePad, 1) nth($shellPanePad, 2);
        }
    }

    body.desktop & {
        &__main {
            // Top and bottom padding in container that holds tree, __pane-main and Inspector
            padding: $shellMainPad;
            min-height: 0;

            > .l-pane {
                padding-top: 0;
                padding-bottom: 0;
            }
        }

        &__pane-tree,
        &__pane-inspector {
            max-width: 30%;
        }

        &__pane-tree {
            width: 300px;
        }

        &__pane-inspector {
            width: 200px;
        }
    }

    &__toolbar {
        $p: $interiorMargin;
        background: $editUIBaseColor;
        border-radius: $basicCr;
        height: $p + 24px; // Need to standardize the height
        padding: $p;
    }
}

.is-editing {
    .l-shell__main-container {
        $m: 3px;
        box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdw;
        margin-left: $m;
        margin-right: $m;

        &[s-selected] {
            // Provide a clearer selection context articulation for the main edit area
            box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdwSelected;
        }
    }
}
