/*****************************************************************************
 * 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 {
        display: flex;
        flex-flow: row nowrap;
        .left {
            @include test(green);
            flex: 1 1 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.left {
            min-width: 150px;
            max-width: 800px;
            width: $ueBrowseLeftPaneW;
        }
    }
}

.edit-mode {
    .split-layout {
        .split-pane-component.pane.right {
            //min-width: 150px;
            //max-width: 50%;
            .split-pane-component.pane.bottom {
                min-height: 50px;
                max-height: 80%;
            }
        }
    }
}

.pane {
    position: absolute;
    &.treeview.left {
	    .create-btn-holder {
		    bottom: auto; top: 0;
		    height: $ueTopBarH;
		    .wrapper.menu-element {
			    position: absolute;
			    bottom: $interiorMargin;
		    }
	    }
	    .tree-holder {
		    overflow: auto;
		    top: $ueTopBarH + $interiorMarginLg;
            padding-right: $interiorMargin;
	    }
    }
    &.items {
        .object-browse-bar {
	        .left.abs,
	        .right.abs {
		        top: auto;
	        }
            //.left.abs {
            //    @include tmpBorder(green);
            //}
            //.right.abs {
            //    @include tmpBorder(red);
            //}
        }
        .object-holder {
            top: $ueTopBarH + $interiorMarginLg;
        }
    }
	.object-holder {
		overflow: 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 {
//            @include test();
			margin-left: $interiorMargin;
			>.holder {
				left: 0;
				right: 0;
			}
			&:first-child {
				margin-left: 0;
				.holder {
					right: $interiorMarginSm;
				}
			}
		}

	}
}

.object-browse-bar .btn,
.object-browse-bar .t-btn,
.object-browse-bar .view-switcher,
.top-bar .buttons-main .btn,
.top-bar .buttons-main .t-btn,
.top-bar .view-switcher,
.tool-bar .btn,
.tool-bar .t-btn {
    $h: $btnToolbarH;
    display: inline-block;
    font-size: $h * $btnFontSizeToH;
    line-height: 200%;
    vertical-align: top;
}

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

.vscroll {
    overflow-y: auto;
}