/* Navs
----------------------------------------------------------*/

/* Inline */

.nav-inline {
	li {
		display: inline-block;

		a {
			font-family: $font-secondary;
			text-transform: uppercase;
			padding: 0 9px;
			@include opacity(0.5);
			background: none;

			&:hover, &:focus {
				@include opacity(1);
				background: none;
			}
		}
	}

	&.nav-sm a { font-size: 11px; }
}

/* Pills */

.nav-pills {
	> li {
		display: inline-block;
		float: none;

		> a {
			color: inherit;
			font-family: $font-secondary;
			text-transform: uppercase;
			font-size: 12px;
			font-weight: 600;
			@include border-radius(30px);
			padding: 11px 26px 12px;

			&:hover, &:focus {
				background-color: $color-grey;
			}
		}

		&.active {
			> a {
				background-color: $color-primary;
				pointer-events: none;

				&:hover, &:focus {
					background-color: $color-primary;
				}
			}
		}

		& + li {
			margin-left: 0;
		}
	}

	&.pills-sm > li > a {
		font-size: 11px;
		padding: 7px 20px 8px;
	}
}

/* Tabs */

.nav-tabs {
	border-bottom: 2px solid rgba($color-black, 0.15);
	> li {
		margin-right: 25px;
		display: inline-block;
		float: none;
		> a {
			position: relative;
			font-family: $font-secondary;
			text-transform: uppercase;
			font-size: 12px;
			font-weight: 500;
			padding: 20px 0;
			color: inherit;
			@include opacity(0.5);
			border: none !important;
			background: transparent !important;

			&:hover, &:focus {
				@include opacity(1);
				border: none !important;
				background: transparent !important;
				color: inherit;
			}

			&:after {
				position: absolute;
				width: 100%;
				height: 2px;
				bottom: -1px;
				left: 0;
				background: $color-primary;
				content: ' ';
				@include transition(all 0.3s ease-out);
				@include transform-origin(top, left);
				@include scaleX(0);
			}
		}
		&.active {
			a {
				@include opacity(1);
				border: none;
				pointer-events: none;
				color: inherit;

				&:hover, &:focus {
					color: inherit;
				}

				&:after {
					@include scaleX(1);
				}
			}
		}
	}

	&.nav-stacked {
		border-bottom: none;
		border-right: 2px solid rgba($color-black, 0.15);

		> li {
			margin-right: 0;
			display: block;

			> a {
				padding: 12px 0;

				&:after {
					width: 2px;
					height: 100%;
					top: 0;
					right: -4px;
					left: auto;
					@include scaleY(0);
				}
			}
			&.active a:after {
				@include scaleY(1);
			}
		}
	}
}

html[dir="rtl"] .nav-tabs > li {
	margin-left: 25px;
	margin-right: 0;
}

.dark .nav-tabs {
	border-color: rgba($color-white, 0.2);

	> li > a:after {
		background: $color-white;
	}
}

/* Links */

.nav-links {

	> li {
		margin-bottom: 11px;

		a {
			font-family: $font-secondary;
			font-size: 13.5px;
			padding: 0;

			> i {
				@include opacity(0.5);
				font-size: 110%;
				margin-right: 10px;
			}

			&:hover, &:focus {
				background: transparent;
				&:after {
					color: $color-primary;
					@include opacity(1);
				}
			}
		}

		> a {
			&:after {
				position: relative;
				font-family: 'themify';
				content: "\e628";
				margin-left: 10px;
				font-size: 90%;
				display: inline-block;
				@include opacity(.5);
				@include transition(all 0.2s ease-out);
			}
		}

		ul {
			display: none;
			list-style: none;
			padding: 10px 0 0 20px;

			> li {
				margin-bottom: 5px;

				a {
					font-size: 12px;
					@include opacity(0.5);
				}

				&.active, &:hover {
					a {
						@include opacity(1);
					}
				}
			}
		}

		&.active {
			> a:after {
				@include rotate(90deg);
			}
			> ul {
				display: block;
			}
		}
	}
}