////
/// @group layout/tabsheet
////


/// controls-opacity
$controls-opacity: 0.3;  /* 0.5 = same as valo .v-tabsheet-scroller*/
/// controls-size
$controls-size-h: 4* $v-font-size;	/*each button as 2*6px horizontal padding*/
///tab-active-height
$tab-active-height: ceil($v-unit-size/11);

/// Common style for tabsheet control elements (min/max-buttons etc.). Only used
/// locally to avoid writing those lines multiple times.
@mixin tabsheet-control-effects {
	/* don't want to write this three times */
	&:hover:before {
		color: inherit; //$v-focus-color;
		}
	&:before {
		vertical-align: middle;
		color: valo-font-color($os-splitter-shade);
		opacity: $controls-opacity;
		}
	}

/// A tabbed container that can be placed inside views/l-control elements, or
///  replace views entirely.
@mixin os-tabsheet {
	.vaadock-tabsheet-button-panel {
		float: right;
		position: absolute;
		top: 0px;
		right: 0px;
		width: $controls-size-h;
		height: 100%;
		background-color: $os-splitter-shade;

		.v-vaadock-tabsheet-maximize-button {
			@include os-icon-font ( $size: $v-font-size,
									$line-height: $v-unit-size,
									$float: right,
									$content: '\f096');
			@include tabsheet-control-effects;
			}

		.v-vaadock-tabsheet-minimize-button {
			@include os-icon-font (	$size: $v-font-size,
									$line-height: $v-unit-size,
									$float: right,
									$content: '\f147');
			@include tabsheet-control-effects;
			}
		.v-vaadock-tabsheet-restore-button {
			@include os-icon-font ($float: right,
								   $size: $v-font-size,
								   $line-height: $v-unit-size,
								   $content: '\f24d',
								   $mirror: true);
			@include tabsheet-control-effects;
			}
		}

	.v-tabsheet-scroller {
		position: absolute;
		top: 0px;
		right: $controls-size-h;
		padding-left: $v-unit-size / 2;
		@include linear-gradient(to left, $os-splitter-shade 70%, rgba(250,250,250,0) 100%);
		background-color: transparent;
		button {
			color: valo-font-color($os-splitter-shade);
			opacity: $controls-opacity;
			}
		&:after {
			display: none;
			}
		}

	.v-tabsheet-tabcontainer {
		background: $os-splitter-shade;
 		&:before {
			display: none;
			}
		@if $os-bordered == true {
			/* needs to calculate to a height that accomodates for border-width;
			else there'll be scrollbars */
 			height: $v-unit-size + $tab-active-height;// - first-number($v-border);
			border: $v-border;
			border-bottom-width: 0px;
			}
		}

	/* exception for tabsheets within views */
	.v-tabsheet-tabcontainer-l-control {
		border: none;
		.v-tabsheet-tabitemcell-first .v-tabsheet-tabitem {
			border-top-left-radius: $v-border-radius;
			}
		}

	.v-tabsheet-tabitemcell {
		.v-tabsheet-tabitem {
			background: $os-dark-contrast;
	        .v-caption {
				color: valo-font-color($os-dark-contrast);
				padding-right: floor($v-unit-size/2);
				padding-left: floor($v-unit-size/2);
				font-size: $v-font-size;
				@if $os-theme-desig == "cxo" {
					font-weight: bold;
					}
				margin-left: 0px;
				@include os-transition(unset);
				@include box-sizing(border-box);
			    border-top: $tab-active-height solid $os-dark-contrast;
			    border-bottom: 0px;
			    &:hover {
   					border-top-color: $os-odd-highlight;
					color: valo-font-color($os-odd-highlight);
			    	}
				}
/* 			.v-caption-closable { */
/* 				margin-left: 0px; */
/* 				} */
			&:hover {
				background: $os-odd-highlight;
				}
			}
		.v-tabsheet-tabitem-selected {
			background-color: $v-panel-background-color;

			&>.v-caption, &>.v-caption.v-caption {
/* 				@if $os-bordered == true { */
/* 					border: $v-border; */
/* 					} */
			    border-top: $tab-active-height solid $v-focus-color;
			    border-bottom: 0px;
				}
			}

 		}
	}