.sidebar {
	background-color: $sidebar-color-primary;
	width: $sidebar-width;
	padding-bottom: 60px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	transition: left 0.3s ease;
	z-index: 20;


	@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;

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

	.label {
		font-size: .75em;
		display: inline-block;
		border-radius: .2em;
		padding: 2px 5px;
		background-color: #ccc;
		color: #000;
		margin: 0 3px;
	}

	.label-screenful {
		color: #fff;
		background-color: #6769d4;
	}

	.sidebar-menu {

		font-size: 14px;
		list-style: none;
		margin: 0;
		padding: 0;

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

		// Second + menu items
		ul {
			padding: 0;
			height: 0px;
			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;
			display: block;
		}

		// 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-active;
			background-color: $sidebar-color-secondary;
		}

		.arrow {
			float: right;
			font-size: 18px;
			line-height: initial;
			transition: all 0.3s ease;
			margin-right: 0;

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

		li.open > a {
			.arrow {
				transform: rotate(90deg);
			}
		}


		// First level items
		&> li {

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

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

			// First level active links have bit darker background
			&.open > a {
				background-color: darken($sidebar-color-primary, 3%);
			}

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

					&.arrow {
						font-size: 20px;
					}
				}
			}

		}

		// Second level items
		& > li > .sidebar-nav> 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;
				padding-right: 15px;
				background-color: darken($sidebar-color-primary, 3%);
			}

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

			// Third level items
			& > .sidebar-nav > li {
				a {
					padding-left: 60px;
					padding-right: 15px;
				}

				& > .sidebar-nav > li {
					a {
						padding-left: 70px;
					}
				}
			}
		}
	}

}

.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-mobile-menu-handle {
	display: none;
	position: absolute;
	top: $header-height-xs;
	background-color: transparent;
	width: 30px;
	bottom: 0;
	z-index: 10;

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