.control {
	&.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: 1.2em;
			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 {
	$base: lighten($colorBodyBg, 20%); // Moved to s-btn
	$p: 10px;   // Moved to s-btn
	@include border-radius($controlCr); // Moved to s-btn
	@include box-sizing(border-box); // Moved to s-btn
	@include text-shadow(rgba(black, 0.3) 0 1px 1px); // Moved to s-btn
//	display: inline-block;
	//	margin-right: 10px;
	padding: 0 ($interiorMargin * 2);  // Moved to s-btn
	text-decoration: none;  // Moved to s-btn
	&.create-btn {
		$h: $ueBrowseViewBarH;
		height: $h;
		line-height: $h;
		font-size: 1.1em;
		padding: 0 ($p * 1.5) 0 $p;
		.menu {
			margin-left: $p * -1;
		}
		.ui-symbol.major {
			font-size: 1.1em;
		}
	}
	&.major {
		$bg: $colorKey;
		@include btnNoticeable($bg);
		$fg: lighten($bg, 50%);
		color: $fg;
		&:hover {
			@include btnNoticeable(lighten($bg, 5%));
			color: $fg;
		}
		.invoke-menu {
			color: $fg;
		}
	}
	&.normal {
		padding: $p * 0.5 $p * 0.7;
	}
	&.outline {
		&:hover {
			background: rgba(#fff, 0.1);
		}
	}
	&.subtle {
		@include btnSubtle($base, lighten($base, 40%));
	}

	&.very-subtle {
		@include btnSubtle($colorBodyBg, lighten($colorBodyBg, 50%));
	}
	&.lg {
		@include border-radius($controlCr * 1.5);
		font-size: 1.2em;
		padding: 7px 25px;
	}
	&.icon-btn {
		.icon {
			color: $colorKey;
		}

		&:not(.disabled):hover .icon {
			color: lighten($colorKey, $ltGamma);
		}
	}
}

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

.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;
	padding: 0 $interiorMargin;
	position: relative;
	&:first-child {
		border-left: none;
		padding-left: 0;
	}
}

.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,
.top-bar .buttons-main .btn,
.top-bar .buttons-main .t-btn,
.tool-bar .btn,
.tool-bar .t-btn {
	$h: $ueEditToolBarButtonH;
	display: inline-block;
	font-size: $h * $btnFontSizeToH;
	height: $h;
	line-height: $h;
	.icon:not(.invoke-menu) {
//		position: relative;
//		top: -0.04em;
		font-size: 150%;
		vertical-align: middle;
	}
}

label.checkbox.custom {
	$bg: lighten($colorBodyBg, $ltGamma);
	$d: $formRowCtrlsH;
	//	@include vertical-align();
	cursor: pointer;
	display: inline-block;
	line-height: $d;
	margin-right: $interiorMargin * 4;
	padding-left: $d + $interiorMargin;
	position: relative;
	vertical-align: 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: 7px;
	$c: $colorBodyFg;
	@include btnSubtle($colorBodyBg);
	height: $h;
	line-height: $h;
	&.dropdown {
		//		padding-left: $p;
		padding-right: $p;
	}

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

	&.btn-invoke-menu {
		$c: $colorKey;
		color: $c;
		padding: 0 5px;
		&:hover {
			color: lighten($c, 10%);
		}
	}

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

.top-bar .btn-menu {
	$h: $ueTopBarH; // 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;
		}
	}
}

/******************************************************** OBJECT-HEADER */
.object-header {
	display: inline-block;
	font-size: 1em;
	.title {
		color: lighten($colorBodyFg, 40%);
	}
	.type-icon {
		font-size: 1.5em;
		margin-right: $interiorMargin;
		vertical-align: middle;
	}
}

.top-bar,
.object-browse-bar {
	.object-header {
		font-size: 1.1em;
		span {
			display: inline-block;
//			margin-right: $interiorMargin;
		}
	}
}

/******************************************************** VIEW-CONTROLS */

.view-controls .view-type {
	$d: 20px;
	$p: 5px;
	@include border-radius($controlCr);
	box-sizing: border-box;
	display: inline-block;
	margin-left: $interiorMargin;
	height: $d;
	line-height: $d;
	padding-left: $p;
	padding-right: $p;
	&.cur {
		background: lighten($colorBodyBg, $ltGamma);
	}
}

.edit-mode .top-bar .control-set.edit-view-controls {
	//	Used in templates/edit-view-controls.html
	margin-right: $interiorMargin * 10;
}

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

::-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);
}