.nav {
	font-size: $nav-font-size;
}

// Nav Link

.nav-link {
	@include clay-link($nav-link);
}

.nav-link.btn-unstyled {
	@include clay-button-variant($nav-link-btn-unstyled);
}

// Nav Btn

.nav-btn {
	align-items: center;
	display: flex;
	height: $nav-item-monospaced-size;
	justify-content: center;
	line-height: $line-height-base;
	margin: $nav-btn-margin-y $nav-btn-margin-x;
	min-width: $nav-item-monospaced-size;
	padding-bottom: $nav-btn-padding-y;
	padding-left: $nav-btn-padding-x;
	padding-right: $nav-btn-padding-x;
	padding-top: $nav-btn-padding-y;
	position: relative;
	text-align: center;
	width: auto;

	&:focus {
		z-index: 1;
	}

	&.disabled {
		opacity: 1;
	}

	&.btn-link {
		margin-left: 0;
		margin-right: 0;
	}

	.lexicon-icon {
		margin-top: 0;
	}
}

// Nav Item Monospaced

.nav-btn-monospaced {
	padding: 0;
}

.nav-link-monospaced {
	align-items: center;
	display: flex;
	height: $nav-item-monospaced-size;
	justify-content: center;
	margin: $nav-btn-margin-y $nav-btn-margin-x;
	min-width: $nav-item-monospaced-size;
	padding: 0;

	.lexicon-icon {
		margin-top: 0;
	}
}

// Nav Item

.nav-item {
	word-wrap: break-word;
}

.nav-item[class*='col-'] {
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

.nav-text-truncate {
	display: inline-block;
	margin-bottom: -6px;
	max-width: 100%;

	@include text-truncate;
}

.dropdown-toggle .nav-text-truncate {
	max-width: calc(100% - 24px);
}

// Nav Form

.nav-form {
	padding-bottom: $nav-stacked-nav-form-padding-bottom;
	padding-left: $nav-stacked-nav-form-padding-left;
	padding-right: $nav-stacked-nav-form-padding-right;
	padding-top: $nav-stacked-nav-form-padding-top;
}

.nav .nav-form {
	padding-bottom: $nav-form-padding-bottom;
	padding-left: $nav-form-padding-left;
	padding-right: $nav-form-padding-right;
	padding-top: $nav-form-padding-top;
}

// Nav Justified

.nav-justified {
	button.nav-link {
		text-align: center;
		width: 100%;
	}
}

// Nav Stacked

.nav-stacked {
	display: block;

	.nav-form {
		padding-bottom: $nav-stacked-nav-form-padding-bottom;
		padding-left: $nav-stacked-nav-form-padding-left;
		padding-right: $nav-stacked-nav-form-padding-right;
		padding-top: $nav-stacked-nav-form-padding-top;
	}
}

// Nav Unstyled

.nav-unstyled {
	flex-wrap: nowrap;

	.nav-btn {
		margin: 0 4px;
		padding: 0 4px;
	}

	.nav-link {
		line-height: $nav-item-monospaced-size;
		padding: 0 4px;
	}

	.nav-link-monospaced {
		margin: 0 4px;
	}
}

// Nav Nested

.nav-nested {
	flex-direction: column;
	flex-wrap: nowrap;

	@include clay-nav-nested($nav-nested-spacer-x);
}

.nav-nested-margins {
	flex-direction: column;
	flex-wrap: nowrap;

	> li .nav > li {
		margin-left: $nav-nested-margins-spacer-x;
	}
}

// Nav Tabs

.nav-tabs {
	font-size: $nav-tabs-font-size;

	.nav-link {
		@include clay-link($nav-tabs-link);
	}

	.nav-item.show .nav-link {
		@include clay-link($nav-tabs-link-show);
	}

	+ .tab-content {
		.tab-pane {
			background-color: $nav-tabs-tab-pane-bg;

			@include border-radius($nav-tabs-tab-pane-border-radius);

			padding: $nav-tabs-tab-pane-padding;

			&.active:first-child {
				border-top-left-radius: 0;
			}
		}
	}
}

.dropdown-item[data-toggle="tab"] {
	.dropdown-item-indicator,
	.dropdown-item-indicator-start,
	.dropdown-item-indicator-end {
		display: none;
	}

	&.active {
		.dropdown-item-indicator,
		.dropdown-item-indicator-start,
		.dropdown-item-indicator-end {
			display: block;
		}
	}
}

// Nav Underline

@each $value in $nav-underline-link-highlight-palette {
	$index: index($nav-underline-link-highlight-palette, $value);

	.nav-underline .nav-item:nth-of-type(#{$index}n + 0) {
		.nav-link::after {
			background-color: nth($nav-underline-link-highlight-palette, $index);
		}
	}
}

.nav-underline {
	font-size: $nav-underline-font-size;

	.nav-link {
		@include clay-link($nav-underline-link);
	}

	.nav-item.show .nav-link {
		@include clay-link($nav-underline-link-show);
	}

	.nav-link::after {
		bottom: $nav-underline-link-highlight-bottom;
		content: $nav-underline-link-highlight-content;
		display: block;
		height: $nav-underline-link-highlight-height;
		position: absolute;
		left: $nav-underline-link-highlight-left;
		right: $nav-underline-link-highlight-right;
		top: $nav-underline-link-highlight-top;
		width: auto;
	}

	.nav-item .nav-link.active:after {
		background-color: $nav-underline-link-active-highlight;
	}

	.nav-link.active,
	.nav-item.show .nav-link {
		&:after {
			@if not ($nav-underline-link-active-content == $nav-underline-link-highlight-content) {
				content: $nav-underline-link-active-content;
			}

			@if not ($nav-underline-link-active-highlight-height == $nav-underline-link-highlight-height) {
				height: $nav-underline-link-active-highlight-height;
			}
		}
	}

	.nav-item .nav-link.disabled:after {
		background-color: $nav-underline-link-disabled-highlight;
	}
}