/*****************************************************************************
 * 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.
 *****************************************************************************/
/*.control {
	// UNUSED?
	&.view-control {
		.icon {
			display: inline-block;
			margin: -1px 5px 1px 2px;
			vertical-align: middle;
			&.triangle-down {
				margin: 2px 2px -2px 0px;
			}
		}

		.label {
			display: inline-block;
			font-size: 11px;
			vertical-align: middle;
		}

		.toggle {
			@include border-radius(3px);
			display: inline-block;
			padding: 1px 6px 4px 4px;
			&:hover {
				background: rgba(white, 0.1);
			}
		}
	}
}*/

.accordion {
	$accordionHeadH: 18px;
	margin-top: $interiorMargin;
	&:first-child {
		margin-top: 0;
	}
	.accordion-head {
		$op: 0.2;
		@include border-radius($basicCr * 0.75);
		@include box-sizing("border-box");
		background: rgba($colorBodyFg, $op);
		cursor: pointer;
		font-size: 0.75em;
		line-height: $accordionHeadH;
		margin-bottom: $interiorMargin;
		padding: 0 $interiorMargin;
		position: absolute;
		top: 0;
		right: 0;
		bottom: auto;
		left: 0;
		width: auto;
		height: $accordionHeadH;
		text-transform: uppercase;
		&:hover {
			background: rgba($colorBodyFg, $op * 2);
		}
		&:after {
			content: "^";
			display: block;
			font-family: 'symbolsfont';
			font-size: 0.9em;
			position: absolute;
			right: $interiorMargin;
			text-transform: none;
			top: 0;
		}
		&:not(.expanded):after {
			content: "v";
		}
	}
	.accordion-contents {
		position: absolute;
		top: $accordionHeadH + $interiorMargin;
		right: 0;
		bottom: 0;
		left: 0;
		overflow-y: auto;
		overflow-x: hidden;
	}
}

.btn-bar {
	//	position: relative;
/*	.btn,
	.btn-set,
	.t-btn {
		display: inline-block;
		//		margin-left: $interiorMargin;
	}
	.btn,
	.t-btn {
		&:first-child {
			//			margin-left: 0;
		}
	}*/
}

.l-composite-control {
	vertical-align: middle;
	&.l-checkbox {
		.composite-control-label {
			line-height: 18px;
		}
	}
}

.l-control-group {
	// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
	//	@include test();
	@include box-sizing(border-box);
	border-left: 1px solid $colorInteriorBorder;
	display: inline-block;
	padding: 0 $interiorMargin;
	position: relative;
	&:first-child {
		border-left: none;
		padding-left: 0;
	}
}

.l-local-controls {
	// Control shown when hovering over an object, like plots and imagery
	// Default position is upper right
	$p: $interiorMargin;
	position: absolute;
	top: $p;
	right: $p;
	z-index: 5;
}

.s-local-controls {
	font-size: 0.7rem;
}

/*
.btn-set {
	// Buttons that have a very tight conceptual grouping - no internal space between them.
	display: inline-block;
	position: relative;
	.btn,
	.t-btn {
		@include border-radius(0);
		border-left: 1px solid lighten($colorBodyBg, 20%);
		margin-left: 0;
		&:first-child {
			border-left: none;
			@include border-left-radius($controlCr);
		}
		&:last-child {
			@include border-right-radius($controlCr);
		}
	}
}
*/

.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;
}

label.checkbox.custom {
	$bg: lighten($colorBodyBg, $ltGamma);
	$d: $formRowCtrlsH;
	cursor: pointer;
	display: inline-block;
	line-height: $d;
	margin-right: $interiorMargin * 4;
	padding-left: $d + $interiorMargin;
	position: relative;
	vertical-align: middle; // was top
	em {
		color: $colorBodyFg;
		display: inline-block;
		height: $d;
		min-width: $d;
		&:before {
			@include border-radius($basicCr * .75);
			background: $bg;
			border-bottom: 1px solid lighten($bg, 10%);
			box-sizing: border-box;
			content: " ";
			font-family: 'symbolsfont';
			font-size: 0.8em;
			display: inline-block;
			margin-right: $interiorMargin;
			height: $d;
			width: $d;
			left: 0;
			top: 0;
			position: absolute;
			text-align: center;
		}
	}
	&.no-text {
		overflow: hidden;
		margin-right: 0;
		padding-left: 0;
		height: $d;
		width: $d;
		em {
			overflow: hidden;
		}
	}
	input {
		display: none;
		&:checked ~ em:before {
			background: $colorCheck;
			color: lighten($colorCheck, 50%);
			content: "2";
		}
	}
}

.input-labeled {
	margin-left: $interiorMargin;
	label {
		display: inline-block;
		margin-right: $interiorMarginSm;
	}
	&.inline {
		display: inline-block;
	}
	&:first-child {
		margin-left: 0;
	}
}

.btn-menu label.checkbox.custom {
	margin-left: 5px;
}

.item .checkbox {
	&.checked label {
		@include box-shadow(none);
		border-bottom: none;
	}
}

.btn-menu {
	$h: 20px;
	$p: $interiorMarginSm * 2;
	$c: $colorBodyFg;
	@include btnSubtle($colorBodyBg);
	/*	height: $h;
		line-height: $h;
		&.dropdown {
			padding-left: $p;
			padding-right: $p;
		}*/

	&:not(.disabled):hover {
		color: lighten($c, 20%);
	}

	/*	&.context-available {
			// An element like the invoke-menu triangle;
			// Indicates that this element has a dropdown menu available;
			// Currently unused
			$c: $colorKey;
			color: $c;
			padding: 0 5px;
			&:hover {
				color: lighten($c, 10%);
			}
		}*/

	span.l-click-area {
		// In markup, this element should not enclose anything.
		@extend .abs;
	}

	.type-icon {
		//margin-right: $interiorMargin;
	}

	.name {
		margin-left: $interiorMargin;
	}
	.menu {
		//		margin-left: (-1 * $p);
		position: absolute;
		left: 0;
		text-align: left;
		.ui-symbol.icon {
			width: 12px;
		}
	}
}

.top-bar .btn-menu {
	$h: $btnStdH; //$ueTopBarBtnH; // 35px
	$p: 10px;
	$badgeM: $interiorMargin;
	$badgeD: $h - ($badgeM * 2);
	//height: $h;
	//line-height: $h;
	//padding-right: 10px;
	&.browse-btn {
		margin-right: $interiorMargin;
		padding-left: $badgeD + $badgeM * 2;
		.badge {
			@include border-radius($controlCr * 1.5);
			display: block;
			font-size: 1em;
			line-height: $badgeD;
			position: absolute;
			top: $badgeM;
			left: $badgeM;
			bottom: $badgeM;
			right: auto;
			width: $badgeD;
			height: auto;
		}
	}
}

.context-available {
	$c: $colorKey;
	color: $c;
	&:hover {
		color: lighten($c, 10%);
	}
}

.view-switcher {
	@include trans-prop-nice-fade($controlFadeMs);
	.type-icon {
		//vertical-align: top;
	}
}

/******************************************************** OBJECT-HEADER */
.object-header {
	//@include test();
	font-size: 1em;

	> .title-label,
	> .type-icon,
	> .context-available {
		//@include tmpBorder(#6666ff);
		//vertical-align: middle;
	}
	> .type-icon {
		font-size: 120%;
		float: left;
		margin-right: $interiorMargin;
	}

	.l-elem-wrapper {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
	}

	.action {
		margin-right: $interiorMargin;
	}

	.title-label {
		@include ellipsize();
		color: lighten($colorBodyFg, 40%);
		padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
		//position: relative;
	}

	.context-available {
		font-size: 0.7em;
	}

	@include desktop {
		.context-available {
			@include trans-prop-nice(opacity, 0.25s);
			opacity: 0;
		}
		&:hover {
			.context-available {
				opacity: 1;
			}
		}
	}
}

/******************************************************** SLIDERS */

.slider {
	$knobH: 100%; //14px;
	$knobW: 12px;
	$slotH: 50%;
	.slot {
		//		@include border-radius($basicCr * .75);
		@include sliderTrack();
		height: $slotH;
		width: auto;
		position: absolute;
		top: ($knobH - $slotH) / 2;
		right: 0;
		bottom: auto;
		left: 0;
	}
	.knob {
		@include btnSubtle();
		@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
		cursor: ew-resize;
		position: absolute;
		height: $knobH;
		width: $knobW;
		top: 0;
		auto: 0;
		bottom: auto;
		left: auto;
		&:before {
			top: 1px;
			bottom: 3px;
			left: ($knobW / 2) - 1;
		}

	}
	.range {
		background: rgba($colorKey, 0.6);
		cursor: ew-resize;
		position: absolute;
		top: 0;
		right: auto;
		bottom: 0;
		left: auto;
		height: auto;
		width: auto;
		&:hover {
			background: rgba($colorKey, 0.7);
		}
	}
}

/******************************************************** BROWSER ELEMENTS */

@include desktop {
	::-webkit-scrollbar {
		@include sliderTrack();
		height: $scrollbarTrackSize;
		width: $scrollbarTrackSize;
	}

	::-webkit-scrollbar-thumb {
		$bg: lighten($colorBodyBg, 10%);
		@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
		@include border-radius(1px);
		@include box-sizing(border-box);
		@include boxShdwSubtle();
		border-top: 1px solid lighten($bg, 20%);
		&:hover {
			@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
		}
	}

	::-webkit-scrollbar-corner {
		background: rgba(#000, 0.4);
	}
}