/*****************************************************************************
 * 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;
	}
}

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

label.checkbox.custom {
	$bg: pullForward($colorBodyBg, 10%);
	$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%);
			@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
			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;
	}
}

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

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

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

.view-switcher {
	@include trans-prop-nice-fade($controlFadeMs);
}

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

	//> .title-label,
	//> .type-icon,
	//> .context-available {
	//	//@include tmpBorder(#6666ff);
	//	//vertical-align: middle;
	//}

	> .type-icon {
		color: $colorObjHdrIcon;
		font-size: 120%;
		float: left;
		margin-right: $interiorMargin;
	}

	.l-elem-wrapper {
		//@include test(#66f, 0.2);
		@include webkitProp(justify-content, flex-start);
		mct-representation {
			// Holds the context-available item
			// Must have min-width to make flex work properly
			// in Safari
			min-width: 0.7em;
		}
	}

	.action {
		margin-right: $interiorMargin;
	}

	.title-label {
		//@include test(green, 0.9);
		@include ellipsize();
		//color: pushBack($colorBodyFg, 40%);
		@include webkitProp(flex, '0 1 auto');
		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 webkitProp(flex, '0 0 1');
		//margin-right: $interiorMargin;
	}

	@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 border-radius(2px);
		@include box-sizing(border-box);
		@include box-shadow(inset $scrollbarTrackShdw);
		background-color: $scrollbarTrackColorBg;
		height: $scrollbarTrackSize;
		width: $scrollbarTrackSize;
	}

	::-webkit-scrollbar-thumb {
		$bg: $scrollbarThumbColor;
		$hc: $scrollbarThumbColorHov;
		$gr: 5%;
		@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
		@include border-radius(2px);
		@include box-sizing(border-box);
		//@include boxShdwSubtle();
		//border-top: 1px solid lighten($bg, 20%);
		&:hover {
			@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
		}
	}

	::-webkit-scrollbar-corner {
		background: $scrollbarTrackColorBg;
	}
}