/*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

.browse-area,
.edit-area,
.editor {
    position: absolute;
}

.editor {
    @include border-radius($basicCr * 1.5);
}

.contents {
    $myM: 0;
    box-sizing: border-box;
    position: absolute;
    top: $myM;
    right: $myM;
    bottom: $myM;
    left: $myM;
    &.nomargin {
        $myM: 0px;
        right: $myM;
        bottom: $myM;
        left: $myM;
    }
}

.user-environ {
    .browse-area,
    .editor {
        top: 0; left: 0; right: 0; bottom: $ueFooterH;
    }

    .browse-area,
    .edit-area {
        > .contents {
            left: 0;
            right: 0;
        }
    }

    .edit-area {
        $tbH: $btnToolbarH + $interiorMargin;
        top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
        left: $bodyMargin;
        right: $bodyMargin;
        bottom: $bodyMargin + $ueFooterH;
        .tool-bar {
            bottom: auto;
            height: $tbH;
            line-height: $btnToolbarH;
        }
        .object-holder.work-area {
            top: $tbH + $interiorMargin * 2;
            overflow: auto;
        }
    }

	.ue-bottom-bar {
		@include absPosDefault(0);// New status bar design
		top: auto;
		height: $ueFooterH;
		line-height: $ueFooterH - ($interiorMargin * 2);
		background: $colorFooterBg;
		color: lighten($colorBodyBg, 30%);
		font-size: .7rem;
		.status-holder {
			@include box-sizing(border-box);
			@include absPosDefault($interiorMargin);
			@include ellipsize();
			right: 120px;
			text-transform: uppercase;
			z-index: 1;
		}
		.app-logo {
			@include box-sizing(border-box);
			@include absPosDefault($interiorMargin);
			cursor: pointer;
			left: auto;
			width: $ueAppLogoW;
			z-index: 2;
			&.logo-openmctweb {
				background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
			}
		}
	}
}

.edit-mode {
    .split-layout {
        .split-pane-component.pane.right {
            width: 15%;
            .pane.bottom {
                min-height: 50px;
                height: 30%;
            }
        }
    }
}

.pane {
    @include box-sizing(border-box);
    position: absolute;

    .pane-header {
        text-transform: uppercase;
        height: $ueTopBarH;
        line-height: $ueTopBarH;
    }

    .primary-pane {
        // Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
        z-index: 2;
    }

    .mini-tab-icon.toggle-pane {
        z-index: 5;
        @include desktop {
            $d: $uePaneMiniTabH;
            $paneExpandedOffset: $splitterD + $uePaneMiniTabW;
            top: $bodyMargin;
            height: $d;
            line-height: $d;
            &:after {
                // Always the icon that shows when the pane is collapsed
                opacity: 0;
            }
            &.collapsed {
                &:before {
                    opacity: 0;
                }
                &:after {
                    opacity: 1;
                }
            }
            &.toggle-tree.anchor-left {
                left: 0;
                @include transform(translateX(-1 * $paneExpandedOffset));
                &:after {
                    content: '\6d'; // Menu 'hamburger' icon
                }
                &.collapsed {
                    left: 0;
                    @include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
                }
                &:not(.collapsed):before {
                    @include trans-prop-nice(opacity, 200ms, 200ms);
                }
            }
            &.toggle-inspect.anchor-right {
                right: $bodyMargin;
                &:after {
                    content: '\e615';  // e615: Crosshair icon; was e608: Info "i" icon
                }
                &.collapsed {
                    right: $interiorMargin;
                }
            }
        }
    }
    &.items {
        .object-browse-bar {
            .left.abs,
            .right.abs {
                top: auto;
            }
        }
    }
}

.split-layout {
    // Specific elements margins
    .holder.holder-treeview-elements {
        top: $bodyMargin;
        right: 0;
        bottom: $bodyMargin;
        left: $bodyMargin;
    }

    .holder.holder-object-and-inspector {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        .holder-object {
            top: $bodyMargin;
            bottom: $bodyMargin;
        }
        .holder-inspector {
            top: $bodyMargin;
            bottom: $bodyMargin;
            left: $bodyMargin;
            right: $bodyMargin;
        }
        .holder-elements {
            top: 0;
            bottom: $bodyMargin;
            left: $bodyMargin;
            right: $bodyMargin;
        }
    }
}

.object-holder {
    @include absPosDefault(0, auto);
    top: $ueTopBarH + $interiorMarginLg;
}

.l-object-wrapper {
    @extend .abs;

    .object-holder-main {
        @extend .abs;
    }

    &.active {
        @include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3);
        @include border-radius($controlCr);
        background-color: $colorEditAreaBg;
        border-color: $colorEditAreaFg;
        border-width: 2px;
        border-style: dotted;
        .l-object-wrapper-inner {
            @include absPosDefault(3px, hidden);
        }
    }
}

.l-object-wrapper-inner {
    @include trans-prop-nice-resize(0.25s);
}

.l-edit-controls {
    @include trans-prop-nice((opacity, height), 0.25s);
    border-bottom: 1px solid $colorInteriorBorder;
    line-height: $ueEditToolBarH;
    height: 0px;
    opacity: 0;
    &.active {
        height: $ueEditToolBarH + $interiorMargin;
        margin-bottom: $interiorMargin;
        opacity: 1;
    }
    .tool-bar {
        right: $interiorMargin;
    }
}

.object-browse-bar .s-btn,
.top-bar .buttons-main .s-btn,
.top-bar .s-menu-btn,
.tool-bar .s-btn,
.tool-bar .s-menu-btn {
    $h: $btnToolbarH;
    height: $h;
    line-height: $h;
    vertical-align: top;
}

.object-browse-bar,
.top-bar {
    .view-switcher {
        margin-right: $interiorMarginLg * 2;
    }
}

/***************************************************** OBJECT BROWSE BAR */
.object-browse-bar {
    // Converting to use flexbox layout
    @include box-sizing(border-box);
    height: $ueTopBarH;
    line-height: $ueTopBarH;
    white-space: nowrap;

    .left {
        padding-right: $interiorMarginLg;
        .l-back:not(.s-status-editing) {
            margin-right: $interiorMarginLg;
        }
    }
}

// When the tree is hidden, these are the classes used for the left menu and the right representation.
.pane-tree-hidden {
    // Sets the left tree menu when the tree is hidden.
    .tree-holder,
    .splitter-treeview,
    .holder-treeview-elements {
        opacity: 0;
    }
}

.pane-tree-showing {
    // Sets the left tree menu when the tree is shown.
    .tree-holder,
    .splitter-treeview {
        @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
        opacity: 1;
    }

    .holder-treeview-elements {
        @include trans-prop-nice(opacity, $dur: 250ms, $delay: 200ms);
    }
}

.pane-inspect-showing {
    .l-object-and-inspector {
        .l-inspect,
        .splitter-inspect {
            @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
            opacity: 1;
        }
    }
}

.pane-inspect-hidden {
    .l-object-and-inspector {
        .l-inspect,
        .splitter-inspect {
            opacity: 0;
        }
    }
}

@include desktop {
    .holder-all {
        min-width: $ueDesktopMinW;
    }
    .split-layout {
        .split-pane-component.pane {
            &.treeview.left {
                min-width: $ueBrowseLeftPaneTreeMinW;
                max-width: $ueBrowseLeftPaneTreeMaxW;
                width: $ueBrowseLeftPaneTreeW;
            }
            &.t-inspect.right {
                min-width: $ueBrowseRightPaneInspectMinW;
                max-width: $ueBrowseRightPaneInspectMaxW;
                width: $ueBrowseRightPaneInspectW;
                z-index: 3; // Must lift up beyond primary pane to allow overflow to go underneath
            }
        }
    }
    .pane.treeview.left .tree-holder {
        padding-right: $interiorMargin;
    }
    .pane-tree-hidden {
        .pane.right.primary-pane { left: $ueCollapsedPaneEdgeM !important; }
    }
    .pane-inspect-hidden .l-object-and-inspector {
        .pane.left { right: $ueCollapsedPaneEdgeM !important; }
    }
    .pane:not(.resizing) {
        @include trans-prop-nice-resize-w(250ms);
    }
    .pane.primary-pane .object-browse-bar {
        min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
    }
}