.sidebar.sidebar-discover {

	@menuSidebarWidth: @menuSidebarDiscoverWidth;
	@menuSidebarItemHeight: 56px;
	@menuSidebarBg: #3f3f3f;

	#menu {
		top: @navbarMainHeight;
		width: @menuSidebarWidth;
		background: @menuSidebarBg;
		bottom: 0;
		
		#sidebar-discover-wrapper {
			.sidebar-discover-menu { display: none; }
			#discover {
				.transition(all 1s ease);
				opacity: 0;
				background: @menuSidebarBg;
				position: absolute;
				// height: 100%;
				top: 0;
				right: 0;
				width: @menuSidebarWidth - 56px;
				z-index: 1;
				overflow: hidden;
				.border-bottom { border-color: @menuSidebarBg; }
				// border-right: 3px solid @contentBorder;
				border-top: 1px solid #e0e0e0;
				ul {
					list-style: none;
					li {
						border-bottom: 1px solid #efefef;
						&:last-of-type {
							border-color: #e0e0e0;
						}
						a {
							position: relative;
							text-align: left;
							height: 44px;
							line-height: 44px;
							padding-left: 20px;
							display: block;
							font-size: 14px;
							color: #676767;
							font-weight: 600;
							.transition(all 500ms ease);
							i { 
								margin-right: 10px; 
								color: lighten(#676767, 40%);
							}
							.badge {
								position: absolute;
								top: 12px;
								right: 10px;
								padding: 3px 5px;
								font-size: 11px;
								font-weight: 700;
								background: @primaryColor;
								border-color: @primaryColor;
								color: #fff;
							}
							&:hover {
								background-color: #fff;
								color: #000;
							}
						}
						&.active {
							border-color: #e0e0e0;
							> a {
								background: #ffffff;
								color: @primaryColor;
							}
							span.badge {
								border-color: #2c2c2c;
								background: #2c2c2c;
								color: #fff;
							}
						}
					}
				}
			}
		}
		#sidebar-discover-wrapper.open, 
		#sidebar-discover-wrapper.mini {
			background-color: #f9f9f9;
			border-right: 3px solid #e2e1e1;
			#discover {
				opacity: 1;
				background: #f9f9f9;
				.close-discover { position: absolute; right: 10px; padding: 0 2px; }
			}
			> ul {
				width: 56px;
				overflow: hidden;
				> li {
					> a {
						> i {
							width: 50px;
							&:before { width: 50px; }
						}
						&.open {
							> i:before {
								color: @primaryColor;
							}
						}
						&:hover > i:before { color: #fff; }
						span { opacity: 0; }
						&[data-toggle="sidebar-discover"]:after { display: none; }
					}
					&.active > a { background: none; }
					> a.open { background: darken(@inverseColor,10%); }
					&.active > a.open i:before { color: #fff; }
					&.active > a { background: @primaryColor; }
				}	
			}
		}
		
		> div {
			position: relative;
			overflow: hidden;
			height: 100%;
		
			> ul {
				padding: 0;
				width: @menuSidebarWidth;
				position: absolute;
				left: 0;
				z-index: 2;
				background: @menuSidebarBg;
				min-height: 100%;
				> li {
					position: relative;
					height: @menuSidebarItemHeight;
					border-bottom: 1px solid lighten(@menuSidebarBg, 2%);
					padding: 0;
					> a {
						padding: 0 0 0 14px;
						display: block;
						color: #999999;
						font-weight: 600;
						text-decoration: none;
						height: @menuSidebarItemHeight;
						line-height: @menuSidebarItemHeight;
						position: relative;
						font-size: 14px;
						border-left: 4px solid darken(@menuSidebarBg,4%);
						border-right: 4px solid darken(@menuSidebarBg,4%);
						&[data-toggle="sidebar-discover"]:after {
							display: block;
							content: "\f054";
							font-family: "FontAwesome";
							font-style: normal;
							font-weight: normal;
							line-height: 1;
							-webkit-font-smoothing: antialiased;
							font-size: 18px;
							color: lighten(@menuSidebarBg,10%);
							position: absolute;
							right: 10px;
							top: 0;
							height: @menuSidebarItemHeight;
							line-height: @menuSidebarItemHeight;
						}
						> span {
							position: absolute;
							left: 50px;
							&.badge {
								display: inline-block;
								position: absolute;
								top: 18px;
								right: 33px;
								left: auto;
								padding: 3px 5px;
								font-size: 11px;
								color: #fff;
								font-weight: 700;
								background: darken(@inverseColor, 4%);
								border-color: darken(@inverseColor, 4%);
							}
						}
						> i {
							display: inline-block;
							height: @menuSidebarItemHeight;
							vertical-align: middle;
							width: 40px;
							&:before { 
								color: lighten(@menuSidebarBg,20%);
								position: relative;
								text-align: left;
								top: -2px;
								left: auto;
								width: 40px;
								font-size: 22px;
								height: @menuSidebarItemHeight;
								line-height: @menuSidebarItemHeight;
							}
						}
						&:hover {
							background: darken(@inverseColor,5%);
							// > i:before { color: @primaryColor; }
							color: #fff;
							> i:before { color: #fff; }
							&[data-toggle="sidebar-discover"]:after { color: #fff; }
							span.badge {
								background: #2c2c2c;
								border-color: #2c2c2c;
								color: #fff;
							}
						}
					}
					&.active {
						> a {
							background: @primaryColor;
							border-left: 4px solid darken(@primaryColor,8%);
							border-right: 4px solid darken(@primaryColor,8%);
							color: #ffffff;
							> i:before { color:#fff; }
							&[data-toggle="sidebar-discover"]:after { color: #fff; }
						}
						span.badge {
							background: #fff;
							border-color: #fff;
							color: #2c2c2c;
						}
						&:hover {
							span.badge {
								background: lighten(@primaryColor, 30%);
								border-color: lighten(@primaryColor, 30%);
								color: #2c2c2c;
							}
						}
					}
				}
			}
		}
	}
}

.sidebar.sidebar-discover .sidebar-discover-mini {
	#content {
		margin-left: 56px;
	}
	#menu {
		width: 56px;
	}
}