
@mixin nav-tab-color(
	$class,
	$color,
	$hue: 500
) {

	&.#{"" + $class} {

		> li > a {

			border-bottom: 2px solid transparent;

			.inner {
				background: get-color($color, 300);
			}

			.overlay {
				background: get-color(grey, 300);
			}

			&:hover,
			&:focus {

				border: none;
				border-bottom: 2px solid get-color($color, $hue);

			}

		}

		& > li.active > a {

			&,
			&:hover,
			&:focus {

				border: none;
				border-bottom: 2px solid get-color($color, $hue);

			}

		}

		&.nav-color-mimic {

			> li > a {

				color: get-color($color, $hue);

				&:hover {

					color: get-color($color, $hue);

				}

			}

		}

	}

}


.nav-tabs,
.nav-justified {

	border: none;
	margin: 0;

	@each $color in map-keys(map-get($color-map, colors)) {

		@include nav-tab-color(nav-tab-#{"" + $color} , $color);

		@each $hue in map-keys(map-fetch($color-map, colors $color)) {

			@include nav-tab-color(nav-tab-#{"" + $color}-#{"" + $hue} , $color, $hue);

		}

	}

	> li {

		border: none;
		margin: 0;

		> a {

			text-transform: uppercase;
			opacity: 0.95;
			font-weight: 400;
			border-radius: 0;
			border: none;
			border-bottom: 2px solid transparent;
			margin-right: 0;
			color: get-color(grey, 200);

			&:hover {

				color: get-color(grey, 50);
				margin-bottom: 0;
				background-color: transparent;
				border: none;
				border-bottom: get-color(grey, 200);

			}

			.icon {

				position: relative;
				top: 2px;
				line-height: 13px !important;

			}

		}

		> a:not([data-toggle="dropdown"]) {

			.icon {

				position: relative;
				top: 5px;
				display: block;
				margin: 0 auto;
				margin-bottom: 10px;
				text-align: center;
				@include clearfix();

			}

		}

		&.active > a {

			opacity: 1;
			border-radius: 0;
			border: none;
			color: get-color(grey, 50);

			&,
			&:hover,
			&:focus {

				background-color: transparent;
				border: none;
				border-bottom: 2px solid $color-white;
				color: get-color(grey, 50);

			}

		}

		.dropdown-menu {

			width: 100%;
			top: -5px;
			left: -1px;

		}

	}

}

.nav-ripple {

	li {

		a {

			overflow: hidden;

			.inner {
				background: rgb(100,100,100);
				height: 100px;
				width: 100px;
				margin: -25px 0 0 -25px;
				position: absolute;
				display: block;
				border-radius: 50%;
				opacity: 0;
				vertical-align: middle;
			}
	
			.overlay {
				background: rgba(200,200,200,0);
				height: 120%;
				width: 120%;
				position: absolute;
				display: table;
			}

		}

	}

}
