////
/// @group layout/sidebar
////

/// Sidebar style displaying an array of buttons
@mixin os-sidebar-buttonpanel {
	.osbpsidebar {
		.menu .v-nativebutton {
			@include os-button;
			text-align: center;
			margin-bottom: $v-layout-spacing-vertical;
			width: calc(100% - $v-layout-spacing-horizontal);
			cursor: pointer;
			&:focus, &:hover {
				outline:0;
				}
			}
		.menu {
	 		padding: $os-layout-margin; 
			}
		.branding {
			@include os-typeface-view-h2;
			}
		}
	}

/// Sidebar style imitating the look of a table. 
@mixin os-sidebar-table-variant{
	.v-slot-osbpsidebar {
		.v-slot-branding {
			background-color: $os-splitter-shade;
			}
		.branding {
			@include os-typeface-sidebar;
				}
		.menu {
			//border-top: $v-border;
			width: 100%;
			padding: $v-unit-size/2;
			overflow: auto;
			.v-nativebutton {
				@include os-button-sidebar-table-variant;
				&:before{
					//padding-left: $v-unit-size/2;
					}
				}
			}	
		.user {
			display: block;
			background-color: $os-splitter-shade;
			padding: ceil($v-unit-size/5);
			//border-top: $os-splitter-size solid $os-splitter-shade;
			
			> .v-slot {
				height: 100%;
				display: inline-block;
				}
			
			:nth-child(4)   {	float:right;}

				
			.v-image {
				border: $v-border;
				border-width: 0px;
				vertical-align: text-top;
				border-radius: $v-unit-size;
				max-width: ceil($v-unit-size * 1.4);
				max-height: ceil($v-unit-size * 1.4);
				}		
				
				
			.v-label {
				@include os-typeface-view-h2;
				color: valo-font-color($os-splitter-shade);
				padding-top: 0px;
				}
				
			.v-menubar, .v-nativebutton {
				background-image: none;
				background-color: transparent;
				border: 0px;
				}
			
			
			.v-menubar > .v-menubar-menuitem-icon-cog {
					vertical-align: text-top;
					height: 100%; 
					display: inline !important;
					@include os-icon-font ($content: '\f013',
										   $placement: before,
										   $size: ceil($v-font-size * 1.5),
										   $line-height: $v-line-height  * $v-scaling-factor--large);
					color: valo-font-color($os-splitter-shade);
					
					}
				
			.v-menubar-submenu-indicator {
				 + .v-menubar-menuitem-caption:after {
					 display:none;
			         }
				 } 
			
/*			.v-menubar {		
				color: $v-app-background-color;
				font-size: $v-font-size * v-scaling-factor--large;
				width: 15%;
				padding: $v-unit-size * 0.25;
				}*/
			/*.v-menubar-menuitem, .v-menubar-menuitem-icon-cog {
				height: $v-unit-size * 2; 
				}*/
			.v-nativebutton	 {
				font-size: $v-font-size * $v-scaling-factor--large;
				color: valo-font-color($os-splitter-shade);
				//width: 15%;
				//padding-right: $v-unit-size * 0.25;
				}
			.icon-cancel:before {
				font-size: $v-font-size * $v-scaling-factor--large;
				color: valo-font-color($os-splitter-shade);
				font-weight: bold;
				line-height: $v-line-height * $v-scaling-factor--large;
				color: valo-font-color($v-app-background-color);
				}
			/*			
			.v-nativebutton:before, .icon-cancel > .v-button-wrap:before, .icon-cancel.v-label:before, .v-menubar-menuitem-icon-cancel:before {
			    font-weight: 600;
			    vertical-align: sub; //text-top; chrome 
				}*/		
			
			.v-nativebutton-caption {
				display: none;
				}
			}		
		} 	
	}

/// Regular sidebar style.  
@mixin os-sidebar {
	.osbpsidebar {
		@include valo-gradient($os-light-contrast, $os-gradient, $os-light-contrast);
		background: $v-app-background-color;
	}
	
	.osbpsidebar .branding .v-label {
		font-weight: bold; 
		span {
			font-weight: initial;
			display: block;
			} 
	}
	
	.osbpsidebar .branding {
		position: relative;
		width: 100%;
		
		.v-label {
			position: relative;
			z-index: 2;
			//background: $os-base-color;
			@include valo-gradient($os-base-color, $os-gradient, $os-base-color);
			white-space: normal;
			//line-height: 1.1;
			color: #fff;
			
			/* WTH? Why is inline-block forced as an inline style? */
			display: block !important;
			padding: $v-unit-size/2;		
			
			
			font-weight: bold; 
			span {
				font-weight: initial;
				display: block;
				}
	
			}
	}
	
	.v-csslayout.v-layout.v-widget.v-has-height.menu.v-csslayout-menu {
	    display: block;
	}
	
	.osbpsidebar .menu .v-nativebutton {
		// TODO mixin
	    -webkit-appearance: none;
	    
	    width: 100%;
		padding: $v-unit-size/6;
	    border: none;
	    margin: 0;
	    position: relative;
	    border-bottom: $v-border;
	    //background: transparent;
	    @include valo-gradient($os-light-contrast, $os-gradient, $os-light-contrast);
	    color: inherit;
	    font-weight: normal;
	    text-align: center;
		
		// TODO mixin
		// 		-webkit-transition: color ease-in-out 100ms, background-color linear 60ms;
		// 		-moz-transition: color ease-in-out 100ms, background-color linear 60ms; 
		// 		transition: color ease-in-out 100ms, background-color linear 60ms; 
	}
	
	.osbpsidebar .menu .v-nativebutton{
		cursor: pointer;
		
		&:active {
			background: rgba(0,0,0,.1);
			}
		&:focus, &:hover {
			outline:0;
			border-bottom-color: $v-focus-color;
		}
		
	}
	
	.badge,
	.notifications .v-button-caption {
		display: inline-block;
		font-size: $v-font-size * 0.9;
		line-height: 1;
		color: #fff;
		//text-shadow: 0 1px 1px rgba(0,0,0,.3);
		padding: .1em .4em .2em;
		
		background: $v-focus-color;
		
		//TODO mixin
		//background: -moz-linear-gradient(top, #faa290 0%, #f77b62 14%, #ec3120 87%, #ce2314 100%);
		//background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#faa290), color-stop(14%,#f77b62), color-stop(87%,#ec3120), color-stop(100%,#ce2314));
		//background: -webkit-linear-gradient(top, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%);
		//background: -o-linear-gradient(top, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%);
		//background: -ms-linear-gradient(top, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%);
		// Sass compiler chokes on this
		// background: linear-gradient(to bottom, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%);
		
		//@include border-radius(2px);
		//border-radius: 2px;
		
		//@include box-shadow(0 1px 1px rgba(0,0,0,.3));
	}
	
	
	.menu .v-nativebutton .badge {
		position: absolute;
		top: 6px;
		right: 8px;
	}
	
	
	.osbpsidebar .user {
		$os-user-height: 34px; 
		display: block;
		//padding-bottom: $v-unit-size *0.85 ;
		
		border-top: $v-border;
		//background: $os-dark-contrast;
		@include valo-gradient($os-dark-contrast, $os-gradient, $os-dark-contrast);
		
		color: #fff;
		
		line-height: initial;
		
		> .v-slot {
			height: $os-user-height;
			display: inline-block;
			}
			:nth-child(4)   {	float:right;}
			
		.v-image {
			width: $os-user-height;
			height: $os-user-height;
			}		
		.v-label {
			font-weight:bold;
			padding-left: $v-unit-size * 0.4;
			padding-top: $v-unit-size * 0.4;
			}
		.v-menubar, .v-nativebutton {
			-webkit-appearance: none;	
			border: none;
			//padding-left: $v-unit-size * 0.2;
			background: transparent;	
			color: inherit;
			}
		.v-menubar {		
			color: #fff;
			font-size: $v-font-size * 2;
			width: 15%;
			padding: $v-unit-size * 0.25;
			}
		span.v-menubar-menuitem.v-menubar-menuitem-icon-cog {
			height: $os-user-height; 
			}
		.v-nativebutton	 {
			font-size: $v-font-size * 1.3;
			width: 15%;
			//padding-right: $v-unit-size * 0.25;
			}
		.icon-cancel.v-nativebutton:before, .icon-cancel > .v-button-wrap:before, .icon-cancel.v-label:before, .v-menubar-menuitem-icon-cancel:before {
		    font-weight: 600;
		    vertical-align: sub; //text-top; chrome 
			}		
		
		.v-nativebutton-caption {
			display: none;
			}
		}
	}