/* 05.09. Main Navigation */
.main-navigation {
	margin: 0;
	padding: 0;
	font-size: 0;
	list-style: none;
	font-weight: bold;

	@media (min-width: $screen-md-min) {
		display: inline;
	}

	> li {
		position: relative;
		font-size: 14px;

		@media (min-width: $screen-md-min) {
			display: inline-block;
		}

		// Main link style.
		> a {
			position: relative;
			display: block;
			color: #666666;
			padding: 18.5px 20px;
			border-bottom: 1px solid rgba(0, 0, 0, .1);

			@media (min-width: $screen-md-min) {
				border-bottom: 0;
				color: #aaaaaa;
				padding: 39px 22px;
			}

			// Separator between main links.
			&::before {
				@media (min-width: $screen-md-min) {
					position: absolute;
					content: '';
					right: 0;
					top: calc(50% - 8px);
					width: 1px;
					height: 16px;
					background-color: rgba(0, 0, 0, .1);
				}
			}
		}

		&:first-of-type {
			> a {
				@media (min-width: $screen-md-min) {
					margin-left: 20px;
				}
			}
		}

		// Don't display last separator.
		&:last-of-type {
			> a {
				&::before {
					display: none;
				}
			}
		}

		&[aria-expanded="true"],
		&:focus,
		&:hover {
			// Main link style on hover.
			> a {
				text-decoration: none;
				color: #333333;

				@media (min-width: $screen-md-min) {
					color: #666666;
				}

				// Line under the links on hover.
				&::after {
					@media (min-width: $screen-md-min) {
						position: absolute;
						content: '';
						width: calc(100% - 30px);
						height: 5px;
						left: 15px;
						bottom: 0;
						background-color: #666666;
					}
				}
			}

			> .sub-menu {
				visibility: visible;
				opacity: 1;
				z-index: 1;
			}

			// Indicator for sub-menus on hover.
			&::after {
				color: #666666;
			}
		}
	}

	// Active current link.
	> .current-menu-item {
		> a {
			color: $primary-color;

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

				&::after {
					@media (min-width: $screen-md-min) {
						background-color: $primary-color;
					}
				}
			}

			// Line under the links for active current link.
			&::after {
				@media (min-width: $screen-md-min) {
					position: absolute;
					content: '';
					width: calc(100% - 30px);
					height: 5px;
					left: 15px;
					bottom: 0;
					background-color: $primary-color;
				}
			}
		}

		// Active current links with sub-menus.
		&.menu-item-has-children {
			> a {
				&:focus,
				&:hover {
					// Line under the links for active current link.
					&::after {
						@media (min-width: $screen-md-min) {
							display: block;
						}
					}
				}
			}

			// Indicator for sub-menus.
			&::after {
				color: $primary-color;
			}

			&:focus,
			&:hover {
				// Different hover for links with sub-menus.
				> a {
					color: #666666;
					// Display line under the main links with sub-menus.
					&::after {
						@media (min-width: $screen-md-min) {
							display: block;
							background-color: $primary-color;
						}
					}
				}

				// Indicator for sub-menus on hover for active menu with children.
				&::after {
					color: #666666;
				}
			}
		}
	}

	// Item with children.
	.menu-item-has-children {
		> a {
			@media (min-width: $screen-md-min) {
				padding: 39px 40px 39px 20px;
			}

			&:focus,
			&:hover {
				// Line under the links for active current link.
				&::after {
					@media (min-width: $screen-md-min) {
						display: none;
					}
				}
			}
		}

		// Indicator for sub-menus.
		&::after {
			@media (min-width: $screen-md-min) {
				position: absolute;
				content: '\f0d7';
				font-family: 'FontAwesome';
				bottom: calc(50% - 9px);
				right: 20px;
				color: #aaaaaa;
			}
		}

		&:focus,
		&:hover {
			// Different hover for links with sub-menus.
			> a {
				// Don't display line under the main links with sub-menus.
				&::after {
					@media (min-width: $screen-md-min) {
						display: none;
					}
				}
			}
		}

		&:first-of-type {
			> a {
				@media (min-width: $screen-md-min) {
					margin-left: 20px;
				}
			}
		}
	}

	// Sub-menu items.
	.sub-menu {
		display: block;
		list-style: none;
		padding: 0;

		@media (min-width: $screen-md-min) {
			position: absolute;
			visibility: hidden;
			opacity: 0;
		}

		> li {
			position: relative;

			> a {
				display: block;
				color: $text-color;
				padding: 18.5px 40px 18.5px 35px;
				border-bottom: 1px solid rgba(0, 0, 0, .1);

				@media (min-width: $screen-md-min) {
					padding: 13.5px 40px 13.5px 20px;
					min-width: 150px;
					background-color: $primary-color;
					color: #ffffff;
					white-space: nowrap;
					border-bottom: 1px solid lighten($primary-color, 8);
				}

				&:hover {
					text-decoration: none;
					color: #666666;

					@media (min-width: $screen-md-min) {
						color: #ffffff;
						background-color: lighten($primary-color, 8);
					}
				}
			}

			&:hover,
			&:focus,
			&[aria-expanded="true"] {
				> .sub-menu {
					visibility: visible;
					opacity: 1;
				}
			}

			&:first-of-type {
				@media (min-width: $screen-md-min) {
					border-top: 2px solid darken($primary-color, 5);
				}

				> a {
					margin-left: 0;
				}
			}
		}

		// scss-lint:disable MergeableSelector

		// scss-lint:disable SelectorDepth

		.sub-menu {
			margin-top: 0;
			left: 100%;
			top: 0;

			> li {
				@media (min-width: $screen-md-min) {
					border-top: 0;
				}

				> a {
					padding-left: 50px;

					@media (min-width: $screen-md-min) {
						padding-left: 20px;
						border-left: 1px solid lighten($primary-color, 8);
					}
				}
			}
		}

		.sub-menu .sub-menu a {
			padding-left: 65px;

			@media (min-width: $screen-md-min) {
				padding-left: 20px;
			}
		}

		.sub-menu .sub-menu .sub-menu a {
			padding-left: 80px;

			@media (min-width: $screen-md-min) {
				padding-left: 20px;
			}
		}

		.sub-menu .sub-menu .sub-menu .sub-menu a {
			padding-left: 95px;

			@media (min-width: $screen-md-min) {
				padding-left: 20px;
			}
		}

		.menu-item-has-children {
			position: relative;

			&::after {
				@media (min-width: $screen-md-min) {
					position: absolute;
					content: '\f0da';
					font-family: 'FontAwesome';
					right: 15px;
					top: calc(50% - 12px);
					color: rgba(250, 250, 250, .5);
				}
			}
		}
	}
}

.navbar-collapse {
	padding: 0;
}

// Mobile Toggle Navigation
.navbar-toggle {
	background-color: $primary-color;
	border-radius: 2px;
	padding: 10px 12px;
	margin: 0 0 20px;
	transition: $primary-transition;

	@media (min-width: 400px) {
		margin: 10px 0 30px;
	}

	&:hover {
		background-color: darken($primary-color, 8);
	}

	.icon-bar {
		background-color: #ffffff;
		width: 18px;
		height: 3px;

		+ .icon-bar {
			margin-top: 3px;
		}
	}

	&__text {
		font-weight: bold;
		color: #ffffff;
		display: inline-block;
		padding: 0 10px 0 0;
	}

	&__icon-bar {
		vertical-align: middle;
		display: inline-block;
		height: 18px;
	}
}

// Home Icon
.home-icon {
	display: block;
	color: #666666;
	font-size: 24px;
	line-height: 50px;
	padding-left: 20px;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	transition: $primary-transition;

	@media (min-width: $screen-md-min) {
		padding-left: 0;
		text-align: center;
		display: inline-block;
		color: #aaaaaa;
		margin-left: 20px;
		border-radius: 2px;
		width: 60px;
		height: 60px;
		border: 1px solid rgba(0, 0, 0, .1);
	}

	&:focus,
	&:hover {
		color: #333333;

		@media (min-width: $screen-md-min) {
			border: 1px solid rgba(0, 0, 0, .15);
			color: #666666;
		}
	}

	.fa {
		vertical-align: middle;
	}

	+ .main-navigation {
		> li {
			&:first-of-type {
				> a {
					@media (min-width: $screen-md-min) {
						margin-left: 0;
					}
				}
			}
		}
	}
}