.nav{
	border-radius: 0.25rem;
	// navs
	&.wrap-border{
		border: 1px solid #ddd;
		li.nav-header{
			margin: 0 0.5rem;
		}
		li.nav-item, div{
			padding: 2px 10px;
		}
	}
	// Square Border
	&.square-border{
		border-radius: 0;
		.nav-item{
			.nav-link.active{
				border-radius: 0;
			}
		}
	}
	.dropdown-divider{
		margin: 0.5rem 0;
	}

	// nav pills	
	&.nav-pills{
		.nav-item{
			.nav-link{
				i{
					&.float-xs-right:before{
						position: relative;
						top: 7px;
						left: 7px;
					}
				}
				.tag{
					&.float-xs-right{
						position: relative;
						top: 1px;
						left: 3px;
					}
				}
				&.dropdown-toggle::after{
					top: -15px;
				}
			}
		}
		// Justified Pills
		&.nav-justified {
			@include nav-justified;
			@include nav-tabs-justified;
			.nav-link{
				&.active{
					border:none;
					&:hover,&:focus{
						border:none;
					}
				}
			}
		}
	}

	// nav tabs
	&.nav-tabs{
		.nav-item {
			.nav-link {
				padding: 0.5rem 0.7rem;
				display: block;
				&.dropdown-toggle::after{
					// top: 2px;
				}
				&.active{
					background-color: #fff;
					border-radius: 0.25rem 0.25rem 0 0;
				}
				i{
					&.float-xs-right{
						margin-left: 0.5rem;
					}
				}
				&.dropdown-toggle{
					&::after{
						top: -15px;
					}
				}
			}
			&:hover{
				color: #333;
			}
		}

		&.wrap-border{
			border: 1px solid #ddd;
		}
		&.no-hover-bg {
			.nav-item:hover{
				background-color: transparent;
			}
		}

		// Square Border
		&.square-border{
			border-radius: 0;
			.nav-item{
				.nav-link.active{
					border-radius: 0;
				}
			}
		}
		// Justified Tabs
		&.nav-justified {
			@include nav-justified;
			@include nav-tabs-justified;
			.nav-item{
				a.nav-link.active{
					background-color: #fff;
				}
			}
		}
	}
	.nav-item{
		.nav-link{
			display: block;
		}
	}
	.dropdown-divider{
		margin: 0.5rem 0;
	}
}
// Vertical Tabs 
.nav-vertical{
	.nav-left{
		&.nav-tabs {
			float: left;
			border-bottom: 0;
			border-right: 1px solid #ddd;
			border-radius: 0;
			display: table;

			li.nav-item {
				float: none;
				margin: 0;
				margin-right: -1px;
				a.nav-link.active{
					border: 1px solid #ddd;
					border-right: 0;
					border-radius: 0.25rem 0 0 0.25rem
				}
			}
			&.nav-border-left{
				li.nav-item {
					a.nav-link{
						color: $brand-danger;
						&.active{
							border-left: 3px solid $brand-danger;
							border-top-right-radius: 0;
							border-bottom-right-radius: 0;
							color: #555;
						}
					}
				}
			}
		}
		~.tab-content {
			margin-left: 45px;
			
			.tab-pane {
				display: none;
				background-color: #fff;
				padding: 0 0 0.6rem 1rem;
				overflow-y: auto;
				&.active { display: block; }
			}
		}
	}
	.nav-right{
		&.nav-tabs {
			float: right;
			border-bottom: 0;
			border-left: 1px solid #ddd;
			border-radius: 0;
			display: table;

			li.nav-item {
				float: none;
				margin: 0;
				margin-left: -1px;
				a.nav-link.active{
					border: 1px solid #ddd;
					border-left: 0;
					border-radius: 0 0.25rem 0.25rem 0;
				}
			}
			&.nav-border-right{
				li.nav-item {
					a.nav-link{
						color: $brand-danger;
						&.active{
							border-right: 3px solid $brand-danger;
							border-top-left-radius: 0;
							border-bottom-left-radius: 0;
							color: #555;
						}
					}
				}
			}
		}
		~.tab-content {
			
			.tab-pane {
				display: none;
				background-color: #fff;
				padding: 0 0 0.6rem 1rem;
				overflow-y: auto;
				&.active { display: block; }
			}
		}
	}
}