.nav {
	font-size: 12px;
	transition: all 0.2s ease-in-out;
	background: darken($color--gray, 10%);
	color: $color--white;
	padding-top: 0;

	ul {
		list-style: none;
		margin: 0 0 35px 0;
		padding: 0;
		display: block;

		&.nav__subnav {
			margin-bottom: 0.1rem;
		}
		.top-bordered {
			border-top: 0.2rem solid rgba($color--seashell, 0.3);
		}
	}
}

.nav__link {
	display: block;
	padding: 1rem 1rem 1rem 3.1rem;
	border-bottom: 1px solid rgba($color--seashell, 0.1);
	text-decoration: none;
	color: rgba($color--white, 0.85);
	border-left: 0rem solid $color--mint;
	transition: all 0.2s linear;
	font-size: 1.3rem;

	&:first-child {
		padding-top: 1.2rem;
	}

	svg {
		display: inline-block;
		float: right;
		width: 3rem;
		text-align: center;
		font-size: 2rem;
		margin-top: -0.1rem;
	}

	&:hover {
		color: $color--white;
		text-decoration: none;
		padding-left: 2.5rem;
		border-left: 0.6rem solid $color--mint;
	}

	&.active {
		padding-left: 2.5rem;
		border-left: 0.6rem solid $color--mint;
		background: darken($color--gray, 12%);
	}

	.nav__subnav & {
		padding: 0.5rem 1rem 0.5rem 4.3rem;
		font-size: 1.4rem; 
		background: darken($color--gray, 12%);
		border-left: 0.1rem solid $color--mint;
		font-size: 1.2rem;
		&:hover {
			padding-left: 3.8rem; 
			border-left: 0.6rem solid $color--mint;
		}
		&.active {
			padding-left: 3.8rem; 
			border-left: 0.6rem solid $color--mint;
			background: darken($color--gray, 12%);
			color: $color--white;
			svg {
				color: $color--mint;
				font-size: 1.6rem;
				margin-top: 0;
			}
		}
	}
}


/*

		li {
			border-top: 1px solid $color--additional-line;
			position: relative;

			a {
				color: rgba($color--white, 0.8);
				padding: 13px 40px 14px 14px;
				display: block;
				border-left: 3px solid transparent;
				transition: 0.1s all linear;
				&:hover {
					background: rgba($color--black, 0.2);
					text-decoration: none;
					border-left: 3px solid $color--additional-light;
				}
			}

			ul {
				height: 0;
				font-size: 0;
				 li {
				 	border: 0;
				 	a { padding: 0; }
				 }
			}

			&.active {
				a {
					background-color: $color--additional-light;
					color: $color--white;
				}
				ul {
					height: auto;
					font-size: 12px;
					li{
						border-top: 1px solid rgba($color--additional-line, 0.5);
						a {
							background: $color--additional;
							padding: 8px 40px 9px 34px;
							&:hover {
								background: rgba($color--black, 0.2);
								text-decoration: none;
								border-left: 3px solid $color--additional-light;
							}
						}

						&:before {
							display: none;
						}

						&.active {
							a {
								background-color: darken($color--additional,3);	
								border-left: 3px solid $color--additional-light;		
								&:before {
									content: $fa-var-chevron-right;
									font-family: 'FontAwesome';
									display: block;
									position: absolute;
									right: 15px;
									top: 10px;
									font-size: 14px;
									pointer-events: none;
								}
							}
						}
					}
				}
			}

			ul { border: none; margin: 0; }

			&:before {
				font-family: 'FontAwesome';
				display: block;
				position: absolute;
				right: 15px;
				top: 10px;
				font-size: 20px;
				pointer-events: none;
			}
		}
	}

	.icon--dashboard {
		&:before {
			content: $fa-var-desktop;
		}
	}

	.icon--superuser {
		&.first {
			border-top: 3px solid #4e737b;
		}
		background: $color--main;

		&.active {
			a {
				background: darken($color--main, 5%);
			}
		}
		&.active li a {
			background: #1a4c58;
			&:hover {
				background: #12363E;
			}
		}
		&:before {
			font-family: 'FontAwesome';
			content: $fa-var-hand-spock-o;
		}
	}
	
	.export {
		position: relative;
		&:before { 
			content: $fa-var-download;
			font-family: 'FontAwesome';
			display: inline-block;
			position: absolute;
			right:15px;
			top: 5px;
			font-size: 20px;
			pointer-events: none;
		}
		&:hover {
			&:after {
				color: #de9b21;
			}
		}
	}



}

body.menu--hide {
	nav.nav {
		left: -192px;
	}
}

*/