/*****************************************************************************
 * 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.
 *****************************************************************************/
@mixin cols($totalCols, $span) {
    $cw: 100% / $totalCols;
    min-width: (500px / $totalCols) * $span;
    @if ($totalCols != $span) {
        width: ($cw * $span) - $ueColMargin;
    } @else {
        width: $cw;
    }
}

.holder-all {
    $myM: 0; // $interiorMarginSm;
    top: $myM;
    right: $myM;
    bottom: $myM;
    left: $myM;
}

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

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

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

.bar {
    .icon.major {
        margin-right: $interiorMargin;
    }
    &.abs {
        text-wrap: none;
        white-space: nowrap;
        &.left,
        .left {
            width: 45%;
            right: auto;
        }
        &.right,
        .right {
            width: 45%;
            left: auto;
            text-align: right;
            .icon.major {
                margin-left: $interiorMargin * 3;
            }
        }
        .l-flex,
        &.l-flex {
            .left,
            .right {
                width: auto;
            }
        }
    }
}

.user-environ {
    .browse-area,
    .edit-area,
    .editor {
        top: $bodyMargin + $ueTopBarH + ($interiorMargin);
        right: $bodyMargin;
        bottom: $ueFooterH + $bodyMargin;
        left: $bodyMargin;
    }

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

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

    .ue-bottom-bar {
        //@include absPosDefault($bodyMargin);
        @include absPosDefault(0); // New status bar design
        top: auto;
        height: $ueFooterH;
        .status-holder {
            //right: $ueAppLogoW + $bodyMargin; New status bar design
            z-index: 1;
        }
        .app-logo {
            left: auto;
            width: $ueAppLogoW;
            z-index: 2;
        }
    }
}

.cols {
    @include clearfix;
    .col {
        @include box-sizing(border-box);
        @include clearfix;
        //		background: rgba(#ffcc00, 0.2);
        float: left;
        margin-left: $ueColMargin;
        padding-left: $interiorMargin;
        position: relative;
        &:first-child {
            margin-left: 0;
            padding-left: 0;
        }
    }
    &.cols-2 {
        $nc: 2;
        .col-1 {
            @include cols($nc, 1);
        }
    }
    &.cols-2-ff {
        // 2 columns, first column is fixed, second is fluid
        .col-100px {
            width: 100px;
        }
    }

    &.cols-6 {
        $nc: 6;
        .col-1 {
            @include cols($nc, 1);
        }
    }
    &.cols-16 {
        $nc: 16;
        .col-1 {
            @include cols($nc, 1);
        }
        .col-2 {
            @include cols($nc, 2);
        }
        .col-7 {
            @include cols($nc, 7);
        }
    }
    &.cols-32 {
        $nc: 32;
        .col-2 {
            @include cols($nc, 2);
        }
        .col-15 {
            @include cols($nc, 15);
        }
    }
    .l-row {
        @include clearfix;
        padding: $interiorMargin 0;
    }
}

.browse-mode {
    .split-layout {
        .split-pane-component.pane {
            //@include test(green);
            &.treeview.left {
                min-width: 150px;
                max-width: 800px;
                width: $ueBrowseLeftPaneTreeW;
            }
            &.t-inspect.right {
                min-width: 200px;
                max-width: 600px;
                //padding-left: $ueCollapsedPaneEdgeM; // Allow room for mini-tab element
                width: $ueBrowseRightPaneInspectW;
            }
        }
    }
}

.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;
        margin-bottom: $interiorMargin;
    }

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

    &.treeview.left {
        //.create-btn-holder {
        //    //bottom: auto;
        //    //top: 0;
        //    height: $ueTopBarH;
        //    .wrapper.menu-element {
        //        position: absolute;
        //        bottom: $interiorMargin;
        //    }
        //}
        .create-and-search-holder {

        }
        .search-holder {
            top: $ueTopBarH + $interiorMarginLg;
        }
        .tree-holder {
            overflow: auto;
            top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
        }
    }

    .mini-tab.toggle-pane {
        //@include test(blue, 0.3);
        $paneExpandedOffset: $splitterD + $uePaneMiniTabW - splitterHandleInset($splitterD, $splitterHandleD);
        $paneCollapsedOffset: $bodyMargin + $ueCollapsedPaneEdgeM;
        z-index: 5;
        @include desktop {
            &.toggle-tree.anchor-left {
                //@include test(green);
                left: 0; //$ox;
                @include transform(translateX(-1 * $paneExpandedOffset));
                &:after { content: 'F'; } // Folder icon
                &.collapsed {
                    @include transform(translateX(-1 * $paneCollapsedOffset));
                }
            }
            &.toggle-inspect.anchor-right {
                $oCx: -1 * $paneCollapsedOffset;
                right: 0; //$ox;
                @include transform(translateX($paneExpandedOffset));
                &:after { content: '\e608'; } // Info "i" icon
                &.collapsed {
                    @include transform(translateX($paneCollapsedOffset));
                }
            }
            &.toggle-search.anchor-left {
                &:after {
                    content:"M"
                }
            }
        }
    }

    &.items {
        .object-browse-bar {
            .left.abs,
            .right.abs {
                top: auto;
            }
        }
    }
}

.split-layout {
    &.horizontal {
        // Slides up and down
        > .pane {
            //			@include test();
            margin-top: $interiorMargin;
            &:first-child {
                margin-top: 0;
            }
        }
    }
    &.vertical {
        // Slides left and right
        > .pane {
            //margin-left: $interiorMargin; // This spacing is now handled by MCTSplitPane.js
            > .holder {
                left: 0;
                right: 0;
            }
            &:first-child {
                margin-left: 0;
                .holder {
                    right: $interiorMarginSm;
                }
            }
        }
    }
}

.object-holder {
    overflow: hidden; // Contained objects need to handle their own overflow now
    top: $ueTopBarH + $interiorMarginLg;
    > ng-include {
        @include absPosDefault(0, auto);
    }
    &.l-controls-visible {
        &.l-time-controller-visible {
            bottom: nth($ueTimeControlH,1) + nth($ueTimeControlH,2) +nth($ueTimeControlH,3) + ($interiorMargin * 3);
        }
    }
}

.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 {
    //@include test(blue);
    @include absPosDefault(0, visible);
    @include box-sizing(border-box);
    height: $ueTopBarH;
    line-height: $ueTopBarH;
    white-space: nowrap;

    .left {
        padding-right: $interiorMarginLg * 2;
        .l-back {
            display: inline-block;
            float: left;
            margin-right: $interiorMarginLg;
        }
    }
}

.l-flex {
    @include webkitVal('display', 'flex');
    @include webkitProp('flex-flow', 'row nowrap');
    .left {
        //@include test(red);
        @include webkitProp(flex, '1 1 0');
        padding-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.
    //.pane.left.treeview,
    .tree-holder,
    .splitter-treeview,
    .search-holder .search {
        opacity: 0;
    }
    .create-and-search-holder {
        @include trans-prop-nice((top, left), 250ms);
        top: $ueTopBarH + $interiorMargin !important;
        left: -1 * $bodyMargin !important;
        .create-btn {
            @include border-left-radius(0);
            @include trans-prop-nice((width), 250ms);
            width: $uePaneMiniTabW !important;
            text-align: center !important;
            padding: 0;
            .title-label,
            &:after {
                display: none;
            }
            &:before {
                font-size: 9px;
            }
        }
    }
}

.pane-tree-showing {
    // Sets the left tree menu when the tree is shown.
    //.pane.left.treeview,
    .tree-holder,
    .splitter-treeview,
    .search-holder .search {
        @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
        opacity: 1;
    }
    .splitter-treeview {
        top: $interiorMarginLg + $ueTopBarH !important;
    }
    .create-and-search-holder {
        @include trans-prop-nice(top, $dur: 250ms, $delay: 200ms);
    }
}

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

@include desktop {
    .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);
    }
}