@import "variables";
.nav-tabs {
	border-bottom-color: $color_gray_10;
	& > li {
		position: relative;
		&:before {
			content: '';
			background: transparent;
			position: absolute; top: 0; left: 0; right: 0;
			z-index: 5;
			display: block; height: 2px;
		}
		& > a, & > span, & .dropdown > a {
			border: 1px solid transparent !important;
			position: relative;
			display: block;
			margin: 0;
			padding: 6px 12px 8px;
			font-size: 16px;
			line-height: normal;
			font-weight: bold;
			color: $color_gray_90;
			@include border-radius(0);
			&:hover {
				background: transparent;
				border-color: transparent;
				color: $color_blue;
				cursor: pointer;
			}
		}
		.dropdown {
			& > a {
				color: $color_blue;
			}
			.dropdown-menu {
				left: auto;
				right: 0;
				min-width: 180px;
				padding: 0;
				li {
					border: none;
					& + li {
						border-top: 1px solid $color_gray_05;
					}
					a {
						border: none;
						display: block;
						padding: 8px 12px;
					}
				}
			}
			&.open {
				& > a {
					background: $color_gray_05;
					border: none;
				}
			}
		}
		.label {
			position: absolute; bottom: 100%; left: 100%;
			z-index: 7;
			margin: 0 0 -12px -10px;
			padding: 3px 4px;
			font-size: 11px;
			@include border-radius(0);
		}
		.drop {
			background: $color_white;
			border: 1px solid $color_gray_10;
			margin: -1px 0 0 0; padding: 0; list-style: none;
			position: absolute; top: 100%; right: 0; z-index: 555;
			min-width: 180px;
			display: none;
			@include border-radius(3px 0 3px 3px);
			@include box-shadow(0 0 5px $color_gray_20);
			li {
				& + li { border-top: 1px solid $color_gray_10; }
				a {
					border: none;
					display: block;
					padding: 6px 12px 8px;
					font-size: 16px;
					line-height: normal;
					font-weight: bold;
					color: $color_gray_90;
					&:hover {
						color: $color_blue;
					}
				}
				&.active {
					a {
						background: $color_blue;
						color: $color_white;
					}
				}
			}
		}
		//&:hover
		&.open {
			span {
				background: $color_white;
				position: relative;
				//z-index: 777;
				border: 1px solid $color_gray_10;
				border-bottom-color: transparent;
			}
			.drop { display: block; }
		}
		&.active {
			&:before {
				background: $color_blue;
			}
			& > a, & > span, & .dropdown > a {
				background: $white;
				border-color: $color_gray_10 !important;
				//border-top-color: $color_blue !important;
				border-bottom-color: transparent !important;
				color: $color_blue !important;
			}
		}
	}

	&.sm {
		& > li {
			position: relative;
			& > a, & > span {
				border: 1px solid transparent;
				position: relative;
				display: block;
				padding: 4px 8px 6px;
				font-size: 14px;
				line-height: normal;
				font-weight: normal;
				color: $color_gray_90;
				@include border-radius(0);
			}
		}
	}

	&.text-center {
		& > li {
			float: none;
			display: inline-block;
			vertical-align: top;
		}
	}

	&.nav-tabs-inline {
		display: flex;
		& > li {
			float: none;
			/*display: inline-block;
			vertical-align: top;
			white-space: normal;*/
			a {
				white-space: normal;
			}
		}
	}

	&.nav-tabs-responsive {
		white-space: nowrap;
		& > li {
			max-width: 84%;
			a {
				position: relative;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			&.more {}
		}
		@media(max-width: 767px){
			display: flex;
			& > li {
				&.more {
					margin-left: auto;
					.drop {
						max-width: 360px;
						white-space: normal;
					}
				}
			}
		}
		@media(max-width: 575px){
			& > li {
				&.more {
					.drop {
						max-width: 296px;
					}
				}
			}
		}
		/*&.v2 {
			& > li {
				&.more {
					padding-left: 5px;
					& > span {
						background: $blue;
						//margin-top: 4px;
						//padding: 11px;
						color: $white;
						@include border-radius(2px);
					}
				}
			}
		}*/
	}
}
.nav-tabs-scroll {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	&.arrow {
		.nav-tabs {
			li:last-child { margin-right: 40px; }
		}
	}
	.nav-tabs {
		border: none;
		position: relative;
		overflow: hidden;
		overflow-x: auto;
		white-space: nowrap;
		&:before {
			background: $color_gray_10;
			position: absolute; bottom: 0; left: 0; right: 0;
			display: block; height: 1px;
		}
		li {
			display: inline-block;
			vertical-align: top;
			float: none;
			margin-bottom: 0;
		}
	}
	.nav-tabs-scroll-arrow {
		position: absolute; top: 0; right: 0; bottom: 0;
		width: 32px;
		background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
		background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
		background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
		.fa {
			background: #6E809A;
			position: absolute; top: 9px; right: 0;
			display: block;
			width: 32px;
			height: 32px;
			//margin-top: -16px;
			padding-left: 2px;
			font-size: 20px;
			line-height: 32px;
			text-align: center;
			color: $color_white;
			@include border-radius(50%);
		}
	}
}

/* TODO: rarely used, move */
.nav-tabs-select {
	position: relative;
	.btn {
		background: $color_gray_05;
		border: 1px solid $color_gray_20;
		position: relative;
		display: block;
		width: 100%;
		padding: 10px;
		color: $color_gray_80 !important;
		text-align: left;
		.fa {
			position: absolute; top: 12px; right: 10px;
		}
		&.btn-primary {
			color: $color_white !important;
		}
	}
	ul {
		background: $color_white;
		border: 1px solid $color_gray_20;
		position: absolute; top: 100%; left: 0; right: 0;
		z-index: 99;
		margin: 0; padding: 0; list-style: none;
		display: none;
		@include border-radius(3px);
		li {
			& + li {
				border-top: 1px solid $color_gray_05;
			}
			a {
				border: none;
				display: block;
				padding: 7px 10px;
				line-height: normal;
				color: $color_dark;
			}
			&.active { display: none; }
		}
	}
	&.open {
		ul {
			display: block;
		}
	}
}