@import "mixins.less";

.drawer{
	width:220px;
	height: 100%;
	position: fixed;
	left: -175px;
	top: 0;
	z-index: 12;
	.inner-shadow(0px,-3px,6px,2px,0.3);
	background: #5B5F67 left repeat-y;
	content: ' ';
	color: #333;
	.lines{
		position: absolute;
		top:25px;
		color:#B9E4FF;
		text-align: center;
		right: 0;
		width:45px;
		font-size: 24px;
		.opacity (0.3);
	}
	.drawer_open{
		.opacity(0);
		.transition();
		height:100%;
		background: url('../img/ribbon.png') left repeat-y #636871;
		.drop-shadow(0px,3px,4px,0px,0.4);
		
		.drawer_logo{
			height:110px;
			background:#fff;
			position: relative;
			z-index: 10;
			.drop-shadow(-1px,1px,1px,0px,0.3);
			>img{
				max-width: 80%;
				max-height: 75%;
				position: absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				margin: auto;
			}
		}
		
		.drawer_picker{
			@height:50px;
			background:#E9EAEC;
			padding: 0 16px;
			position: relative;
			
			>a{
				text-decoration: none;
				color:#5B5F67;
				font-size:15px;
				font-weight:300;
				line-height: @height;
				>i{
					position: absolute;
					right:15px;
					font-size:20px;
					line-height: @height;
				}
			}
			
			&:hover{
				cursor: pointer;
				background: #f3f3f5;
			}
		}
		
		.drawer_utility{
			height:42px;
			margin:0px;
			background: url('../img/utility-bg.png') repeat-y #F1F2F5;
			background-size:100%;
			border-top: 1px solid #ccc;
			.drop-shadow(-1px,1px,3px,1px,0.1);
			white-space: nowrap;
			>li{
				width:24%;
				display: inline-block;
				position: relative;
				height: 100%;
				.transition();
				&:nth-child(3){
					//width:30%;
					+ aside {
						overflow: hidden;
						position: absolute;
						margin-left:3px;
						margin-top:-5px;
						width:~"calc(100% - 3px)";
						.transition();
						li{
							.transition();
							line-height: 35px;
							width:100%;
							height: 0;
							background:#ECEDF0;
							padding-left: 14px;
							font-size:13px;
							color:#636871;
							overflow: hidden;
							&:not(.selected){
								padding-left: 34px;
								position: relative;
								i{
									left:13px;
									line-height: 32px;
									font-size: 14px;
								}
							}
							&.selected{
								
								span{
									float: right;
									margin:6px 13px;
									width:20px;
									height:20px;
									line-height: 20px;
									text-align: center;
									font-size: 11px;
									background: #fff;
									border-radius: 50%;
								}
							}
							i{
								margin-right: 5px;
							}
						}
					}
					i{
						font-size:17px;
					}
					&:hover + aside, + aside:hover {
						
						height: auto;
						.transition();
						li{
							.transition();
							height: 35px;
							border-top: 1px solid #DADADA;
							&:hover{
								background:#f3f3f5;
								cursor: pointer;
							}
						}
					}
				
				}
				&:nth-child(4){
					width:20%;	
				}
				i{
					font-size: 19px;
					color:#868686;
					line-height: 36px;
					top:0;
					bottom:0;
					left:0;
					right:0;
					position: absolute;
					margin: auto;
					text-align: center;
				}
				&.stack >i + i{
					opacity: 1;
					color: #fff;
					z-index: 1;
				}
				&.stack > i{
					z-index: 2;
				}
				&.locked, &.locked:hover{
					>i{color:#C78732;}
					>i + i{
						color:#EFE4D6;
					}
				}
				&:hover{
					&.stack > i + i{
						color: #7A96CA;
					}
					&.stack > i{
						opacity: 1;
					}
					cursor: pointer;
					color:#222;
					>i{
						color:#303D54;
					}
				}
			}
		}
		
		>footer{
			width:100%;
			position: absolute;
			left: 0;
			bottom: 25px;
			
			.drawer_fluxx{
				text-align: center;
				margin-bottom: 25px;
				>img{
					max-width: 140px;
				}
			}
			
			>ul >li{
				//width:46%;
				display: inline-block;
				//float: left;
				//text-align: center;
				>i{
					font-size: 1.5em;
					color:#C1C1C1;
					&.u-checkup-f{
						position: absolute;
						left: 50px;
						bottom: 3px;
					}
				}
				
				&:hover{
					cursor: pointer;
					>i{
						color:#fff;

					}
				}
			}
		}
	}	
}

.drawer_signals{
	width:220px;
	margin: 0;
	position: absolute;
	top:0;
	left:-220px;
	z-index: 15;
	height: 100%;
	header{
		position: absolute;
		top:0;
	}
	.scroll{
		height: ~"calc(100% - 105px)";
		width:100%;
		margin-top:67px;
		position: relative;
		overflow: hidden;
		
	}
	img{
		width:100%;
	}
	footer{
		position: absolute;
		bottom:0;
		.drop-shadow(-2px, 0px, 1px, 2px, 0.3);
	}
}