/* 05.09. Main Navigation */
.main-navigation {
	@include list-unstyled;
	font-size: 0; // Hack for having 0px space between menu-items.
	margin-bottom: ptr(23);
	background-color: $gray-lighter;
	border: 1px solid #dddddd;

	@include media-breakpoint-up(lg) {
		display: inline; // Keeps Home Icon and Main Navigation in same line when there is break.
		margin: 0;
		border: 0;
		background-color: #ffffff;
	}

	.menu-item {
		position: relative;
		font-size: ptr(12);

		@include media-breakpoint-up(lg) {
			display: inline-block;
		}

		// :hover colors for Main Navigation links (without sub-menus).
		&:focus,
		&:hover,
		&[aria-expanded="true"] {
			> a {
				color: $gray-dark;
				text-decoration: none;
			}

			// 1. level sub-menus are open on :hover.
			> .sub-menu {
				visibility: visible;
				opacity: 1;
				z-index: 1;
			}
		}

		&:last-of-type {
			> a {
				border-bottom: 0;
			}
		}

		&::before {
			position: absolute;
			content: '\f105';
			font-family: 'FontAwesome';
			color: #666666;
			right: ptr(30);
			font-size: ptr(16);
			top: ptr(15);

			@include media-breakpoint-up(lg) {
				display: none;
			}
		}
	}

	// Main Navigation Links and Colors.
	a {
		display: block;
		font-family: $tertiary-font;
		letter-spacing: $tertiary-font-letter-spacing;
		font-weight: bold;
		color: $gray-dark;
		text-transform: uppercase;
		transition: $primary-transition;
		padding: ptr(19) ptr(28);
		border-bottom: 1px solid #dddddd;

		@include media-breakpoint-up(lg) {
			color: $gray-light;
			border-bottom: 0;
			padding: ptr(35) ptr(17);
		}

		&:focus {
			@include media-breakpoint-up(lg) {
				text-decoration: none;
				color: $gray-light;
			}
		}
	}

	// Active current link.
	> .current-menu-item {
		> a {
			@include media-breakpoint-up(lg) {
				color: $gray-dark;
			}

			// Line above the links for active current link.
			&::after {
				@include media-breakpoint-up(lg) {
					position: absolute;
					content: '';
					width: calc(100% - #{ptr(14)});
					height: ptr(2);
					left: ptr(7);
					top: ptr(-1);
					background-color: $gray-dark;
				}
			}
		}
	}

	// Item with children.
	> .menu-item-has-children {
		// Indicator for sub-menus.
		&::after {
			@include media-breakpoint-up(lg) {
				position: absolute;
				content: '\f0d7';
				font-family: 'FontAwesome';
				bottom: ptr(12);
				left: calc(50% - #{ptr(5)});
				color: $gray-light;
				transition: $primary-transition;
			}
		}

		&::before {
			position: absolute;
			content: '\f107';
			font-family: 'FontAwesome';
			color: #666666;
			right: ptr(28);
			font-size: ptr(16);
			top: ptr(15);

			@include media-breakpoint-up(lg) {
				display: none;
			}
		}

		+ .menu-item {
			border-top: 1px solid #dddddd;

			@include media-breakpoint-up(lg) {
				border-top: 0;
			}
		}

		> a {
			border-bottom: 0;
		}
	}

	// Sub-menu items.
	.sub-menu {
		@include list-unstyled;
		background-color: #ffffff;
		transition: $primary-transition;

		@include media-breakpoint-up(lg) {
			background-color: transparent;
			position: absolute;
			visibility: hidden;
			opacity: 0;
		}

		.menu-item {
			display: block;
			padding: 0 ptr(30);

			@include media-breakpoint-up(lg) {
				padding: 0;
			}

			// 2. level sub menus are open on :hover.
			&:focus,
			&:hover,
			&[aria-expanded="true"] {
				> .sub-menu {
					visibility: visible;
					opacity: 1;
				}

				> a {
					@include media-breakpoint-up(lg) {
						background-color: lighten($gray-dark, 7);
						color: #ffffff;
					}
				}
			}

			&::before {
				display: none;
			}
		}

		// Sub menu links on mobile.
		a {
			display: block;
			font-weight: normal;
			font-family: $primary-font;
			letter-spacing: 0;
			text-transform: inherit;
			font-size: ptr(14);
			color: $gray-light;
			padding: ptr(17) ptr(15);

			// Sub menu links on desktop.
			@include media-breakpoint-up(lg) {
				background-color: $gray-dark;
				color: #999999;
				padding: ptr(17);
				min-width: ptr(150);
				white-space: nowrap;
				border-bottom: 1px solid lighten($gray-dark, 7);
			}
		}

		// 2. level + are opening next to each other.
		.sub-menu {
			left: 100%;
			top: 0;

			a {
				@include media-breakpoint-up(lg) {
					border-left: 1px solid lighten($gray-dark, 7);
				}
			}
		}

		.menu-item-has-children {
			&::after {
				@include media-breakpoint-up(lg) {
					position: absolute;
					content: '\f0da';
					font-family: 'FontAwesome';
					right: ptr(17);
					top: calc(50% - #{ptr(12)});
					color: lighten($gray-dark, 7);
				}
			}

			&:last-of-type {
				> a {
					border-bottom: 1px solid #dddddd;

					@include media-breakpoint-up(lg) {
						border-bottom: 0;
					}
				}
			}
		}
	}
}

// Home Icon.
.home-icon {
	position: relative;
	display: block;
	transition: $primary-transition;
	background-color: $gray-lighter;
	color: $gray-dark;
	padding: ptr(14) ptr(28);
	border-left: 1px solid #dddddd;
	border-right: 1px solid #dddddd;
	border-top: 1px solid #dddddd;

	@include media-breakpoint-up(lg) {
		display: inline-block;
		color: $gray-light;
		font-size: ptr(25);
		line-height: 1;
		background-color: transparent;
		border-left: 0;
		border-top: 0;
		border-right: 1px solid rgba(0, 0, 0, .1);
		margin-right: ptr(9);
		padding: ptr(6) ptr(30) ptr(12) 0;
	}

	&:focus,
	&:hover {
		color: $gray-dark;
	}

	.fa {
		vertical-align: middle;
	}

	&::before {
		position: absolute;
		content: '\f105';
		font-family: 'FontAwesome';
		color: #666666;
		right: ptr(30);
		font-size: ptr(16);
		top: ptr(15);

		@include media-breakpoint-up(lg) {
			display: none;
		}
	}
}