/*
Nav plus
*/
.nav-border{
	.nav > li.active:after{
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		border-left-color: inherit;
		border-left-width: 3px;
		border-left-style: solid;
	}
}

.nav-color{
	.nav > li > a{
		> *{
			position: relative;
		}
		&:before{
			content: '';
			position: absolute;
			z-index: 0;
			left: 1rem;
			width: $aside-nav-height;
			height: 100%;
			border: $aside-nav-height/2 solid transparent;
			@include transition(width 0.4s ease 0s);
		}
		&[class*="b-"]:before,
		&[class*=" b-"]:before{
			border-color: inherit;
		}
	}
	.nav > li.active > a:before{
		width: 100%;
		left: 0;
		right: 0;
	}
}

.nav-stacked{
	.nav{
		> li {
			&:not(.nav-header){
				padding: $aside-nav-stacked-margin 0.5rem;
			}
			> a{
				line-height: $aside-nav-stacked-height;
				padding: 0 0.5rem;
				.nav-icon{
					width: $aside-nav-stacked-height;
				}
				.nav-text{
					padding: ($aside-nav-stacked-height - 1.125)/2 0;
				}
				&:before{
					left: 0.5rem;
					border-radius: 3px;
					width: $aside-nav-stacked-height;
					border-width: $aside-nav-stacked-height/2;
				}
			}
			li {
				a {
					padding-left: 0.5rem + $aside-nav-stacked-height + $aside-nav-icon-margin;
				}
				li a{
					padding-left: 1.5rem + $aside-nav-stacked-height + $aside-nav-icon-margin;
				}
				li li a{
					padding-left: 2.5rem + $aside-nav-stacked-height + $aside-nav-icon-margin;
				}
			}
		}
		li{
			a{
				border-radius: 3px;
			}
		}
	}
	&.nav-stacked-rounded{
		.nav > li > a,
		.nav > li > a:before{
			border-radius: 500px;
		}
		.nav li li a,
		.nav li.active{
			background: transparent;
		}
	}
}

.nav-light{
	.nav{
		.nav-icon i svg,
		.nav-icon i img{
			display:block;
		}
	}
}

.nav-center{
	text-align: center;
	.nav-icon{
		display: none;
	}
	.nav-caret{
		position: absolute;
		right: 10px;
	}
	.nav-label{
		position: absolute;
		padding-left: 10px;
	}
	.nav a{
		padding-left: 16px !important;
	}
	.nav-fold .pull-left{
		float: none !important;
		margin-bottom: 10px;
		display: inline-block;
	}
}

@include media-breakpoint-up(lg){
	.folded {
		&,
		.scroll{
			width: $aside-folded-width;
		}
		&.md{
			&,
			.scroll{
				width: $aside-folded-md-width;
			}
		}
		.hidden-folded{
			display: none;
		}
		.nav li ul{
			display: none;
		}
		.nav > li > a{
			text-align: center;
			padding-left: 4px;
    		padding-right: 4px;
			.nav-caret,
			.nav-text{
				display: none;
				padding-left: 4px;
				padding-right: 4px;
			}
			.nav-label{
				position: absolute;
				top: -6px;
				right: 6px;
			}
			.nav-icon{
				float: none;
				line-height: $aside-nav-folded-height;
				margin: 0;
				position: relative;
				width: $aside-nav-folded-height;
			}
			&:before{
				left: 0;
			}
		}
		.nav li.active{
			background: transparent;
		}
		&.show-text{
			.nav > li > a{
				.nav-text{
					display:block;
					margin-top: -18px;
					font-size: 0.85em;
				}
			}
		}
		.navbar{
			text-align: center;
			padding-left: 4px;
			padding-right: 4px;
		}
		.navbar-brand{
			float: none;
			margin: 0;
		}
		.nav-fold{
			padding: 8px 16px;
			.pull-left{
				float: none !important;
				margin: 0;
				display: block;
				text-align: center;
				img{
					margin: 0 auto;
				}
			}
		}
		.nav-stacked-rounded .nav > li > a{
			width: $aside-nav-folded-height;
			margin: 0 auto;
			padding: 0;
			.nav-icon{
				width: $aside-nav-folded-height;
			}
		}
		.nav-color .nav > li > a{
			&:before{
				width: 100%;
				border-width: $aside-nav-folded-height/2;
				background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0), rgba(0,0,0,0.15));
			}
		}
	}

	.folded.nav-expand{
		@include transition(width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1));
		@include backface-visibility(hidden);
		overflow-x: hidden;
		overflow-y: auto;
		position: absolute;
		&:hover,
		&:focus,
		&.active{
			&,
			.scroll{
				width: $aside-width !important;
			}
			> *{
				width: $aside-width;
			}
			.hidden-folded{
				display: block;
			}
			.hidden-folded.inline{
				display: inline-block;
			}
			.nav li ul{
				display: inherit;
			}
			.nav > li > a{
				width: auto !important;
				margin: 0 !important;
				text-align: left;
				padding-left: 1rem;
				padding-right: 1rem;
				.nav-caret,
				.nav-text{
					display: block;
				}
				.nav-text{
					font-size: 1em;
					margin: 0;
				}
				.nav-label{
					position: static;
				}
				.nav-icon{
					float: left;
					width: $aside-nav-height;
					line-height: $aside-nav-height;
					margin-left: 0;
					margin-right: $aside-nav-icon-margin;
				}
			}
			.navbar{
				text-align: left;
				padding-left: 1rem;
				padding-right: 1rem;
			}
			.nav-color{
				.nav > li > a:before{
					width: $aside-nav-height;
					left: 1rem;
					border-width: $aside-nav-height/2;
				}
				.nav > li.active > a:before{
					width: 100%;
					left: 0;
				}
			}
			.nav-stacked{
				.nav{
					> li {
						> a{
							padding: 0 0.5rem;
							&:before{
								left: 0.5rem;
								width: $aside-nav-stacked-height;
								border-width: $aside-nav-stacked-height/2;
							}
							.nav-icon{
								width: $aside-nav-stacked-height;
								line-height: $aside-nav-stacked-height;
							}
						}
					}
				}
			}
			.nav-fold{
				padding: 12px 16px;
				.pull-left{
					float: left !important;
					img{
						height: auto;
						&.w-40{
							width: 40px;
						}
						&.w-48{
							width: 48px;
						}
					}
				}
			}
		}
	}

	.nav-dropup,
	.folded.nav-dropdown{
		&,
		[flex],
		[data-flex],
		> *,
		.row-body{
			overflow: visible !important;
		}
		.nav > li {
			&:hover,
			&:focus{
				> ul {
					display: block;
				}
			}
			> ul {
				display: none;
				overflow: visible;
				max-height: 999px;
				color: $dark-white;
				background-color: $black;
				border-radius: 2px;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
				position: absolute;
				left: 100%;
				top: 0;
				padding: 6px 0;
				a {
					padding-left: 16px !important;
					padding-right: 16px !important;
					min-width: 160px;
				}
				li.active ul {
					display: block;
				}
				.nav-text{
					padding: 6px 0 !important;
				}
			}
			.nav-mega{
				width: 320px;
				> li{
					width: 160px;
					float: left;
				}
				&.nav-mega-3{
					width: 480px;
				}
			}
		}
	}
}