.sidebar {
	background-color: $sidebar-color-primary;
	color: #678098;
	width: $sidebar-width;
	padding-bottom: 60px;
	position: absolute;
	top: $header-height;
	left: 0;
	bottom: 0;
	border-right: 1px solid #cfd8dc;
	transition: left 0.3s ease;
	-webkit-transition: left 0.3s ease;
	z-index: 20;

	@include media-down(sm) {
        top: 0px; } 

  	@include media-down(md) {
		position: fixed;
		left: -$sidebar-width;
	}
 
	.sidebar-fixed & {
		position: fixed;
	}

	.sidebar-open & {
		left: 0;

	}

	.sidebar-container {
		position: absolute;
		top: 0;
		bottom: 51px;
		width: 100%;
		left: 0;
		overflow-y: auto;
		overflow-x: hidden;
		background-color: $sidebar-color-primary;

		&::-webkit-scrollbar-track {
			background-color: darken($sidebar-color-primary, 6.5%);
		}

		&::-moz-scrollbar-track {
			background-color: darken($sidebar-color-primary, 6.5%);
		}
	}

	.nav {

		font-size: 14px;

		// Common styles
		li {
			a:focus,
			.open & a:focus {
				background-color: $sidebar-color-primary;
			}
		}

		// Second + menu items
		ul {
			padding: 0;
			height: auto;
			overflow: hidden;

			.loaded & {
				height: auto;
			}
		}

		li.active ul {
			height: auto;
		}


		// All links which are not active
		// have subdued color
		li a {
			color: $sidebar-color-text;
			text-decoration: none;
		}

		// All links which are not active
		// On hover bg become darker
		// Their color become lighter
		li a:hover,
		li.open > a,
		li.open a:hover {
			color: $sidebar-color-text-hover;
			background-color: $sidebar-color-hover;
		}


		// First level items
		&> li {

			// First level items links
			& > a {
				padding-top: 15px;
	            padding-bottom: 15px;
	            padding-left: 20px;
	            padding-right: 10px;
			}

			// First level active links have primary background
			&.active > a,
			&.active > a:hover {
				background-color: $sidebar-color-hover !important; 
				color: $sidebar-color-text-hover !important;
			}

			// First level active links have bit darker background
			&.open > a {
				background-color: $sidebar-color-primary;
			}

			// Open items links
			&.open > a {
				i.arrow {
					transform: rotate(90deg);
					-webkit-transform: rotate(90deg);
				}
			}

			// First level item links arrow 
			& > a {
				i {
					margin-right: 5px;
					font-size: 16px;

					&.arrow {
						float: right;
						font-size: 20px;
						line-height: initial;
						transition: all 0.3s ease;
						-webkit-transition: all 0.3s ease;

						&:before {
							content: "\f105" !important;
						}
					}
				}
			}

		}

		// Second level items
		& > li > ul > li {

			// Second level and deeper items links
			// Have bit darker background and more padding 
			// from left side
			a {
				padding-top: 10px;
				padding-bottom: 10px;
				padding-left: 50px;
				background-color: $sidebar-color-secondary;
			}

			// Second level active items links
			// Have brighter color
			&.active a {
				background-color: $sidebar-color-active;
				color: $sidebar-color-text-active;
			}
		}
	}

}

.sidebar-header {
	.brand {
		background-color: $color-primary;
		text-align: left;
		padding-left: 5px;
		line-height: $header-height;
		font-size: 16px;
		
		@include media-down(sm) {
			line-height: 50px;
			font-size: 16px;
		}
	}
}

.sidebar-overlay {
	position: absolute;
	display: none;
	left: 200vw;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 5;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 15;

	@include media-down(md) {
		display: block;
	}

	@include media-down(sm) {
		background-color: fade-out(#000, 0.3);
	}


	.sidebar-open & {
		@include media-down(md) {
			left: 0;
			opacity: 1;
		}
	}
}

.sidebar-footer {
  border-top: 1px solid #cfd8dc;
}