// sass-lint:disable force-element-nesting, force-pseudo-nesting, no-empty-rulesets, no-mergeable-selectors, one-declaration-per-line

/* -----------------------------------------
	02. Main Navigation
----------------------------------------- */
.nav {
	display: block;

	@include media-breakpoint-down(md) {
		display: none;
	}
}

.navigation-main {
	@include clearfix;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;

	// Apply top margin to the fullwidth menu to keep
	// it more distanced from the logo
	@at-root {
		.head-mast {
			[class^="col-lg-12"]  {
				.navigation-main {
					margin-top: 10px;
				}
			}
		}
	}

	// Functional Styles
	// ===================================
	li { position: relative; }
	> li { display: inline-block; }
	a { display: block; white-space: nowrap; }

	ul {
		text-align: left;
		position: absolute;
		z-index: 10;
		visibility: hidden;
		opacity: 0;
		transition: transform .25s ease .2s, opacity .25s ease .2s, visibility 0s ease .35s;
		transform: translate(0, 10px);
	}

	ul ul {
		top: -7px;
		left: 100%;
		margin: 0;
		transform: translate(-10px, 0);
	}

	li:focus-within,
	li:hover {
		> ul {
			transition-delay: 0s, 0s, 0s;
			visibility: visible;
			opacity: 1;
		}

		ul {
			z-index: 15;
		}
	}

	> li:hover > ul {
		transform: translate(0, 0);
	}

	li li:hover > ul {
		transform: translate(0, 0);
	}

	> .nav-open-left {
		ul {
			right: 0;
		}

		ul ul {
			right: 100%;
			left: auto;
		}
	}

	li {
		.nav-open-left {
			ul {
				right: 100%;
				left: auto;
			}

			&.menu-item-has-children > a,
			&.page_item_has_children > a {
				&::after {
					content: "\f0d9";
					font-size: 12px;
				}
			}
		}

		&.nav-open-left {
			.menu-item-has-children > a,
			.page_item_has_children > a {
				&::after {
					content: "\f0d9";
					font-size: 12px;
				}
			}
		}
	}

	// Development only
	//> li:nth-child(3),
	//> li:first-child {
	//	ul { transform: translate(0, 0); visibility: visible !important; opacity: 1 !important; }
	//	ul ul { transform: translate(0, 0); opacity: 1 !important; }
	// }

	// Visual Styles
	// ===================================

	// Sub-menu containers
	ul {
		padding: 7px;
		list-style: none;
		background-color: $white;
		min-width: 220px;
		border-radius: 3px;
		box-shadow: 0 0 24px rgba($black, .08);
		margin-left: -7px;
	}

	// Global Menu Link Styles
	a {
		position: relative;
		color: $text-color-dark;
		font-size: 14px;
	}

	// First Level Menu Links
	// -----------------------------------

	// Default Styles
	> li > a {
		padding: 10px 0;
		margin: 0 15px;
		text-transform: uppercase;
		font-weight: 500;
		border-bottom: 2px solid transparent;

		.over-background & {
			color: $white;
		}
	}

	// Active & Hover
	> li:hover > a,
	> li > a:focus,
	> .current-menu-item > a,
	> .current-menu-parent > a,
	> .current-menu-ancestor > a,
	> .current_page_item > a,
	> .current_page_parent > a,
	> .current_page_ancestor > a {
		border-color: $accent-color;
	}

	// Sub-Menu Links
	// -----------------------------------

	// Default Styles
	li li a {
		padding: 9px 15px;
		font-size: 14px;
		border-radius: 3px;
	}

	// Active & Hover
	li li:hover > a,
	li li > a:focus,
	li .current-menu-item > a,
	li .current-menu-parent > a,
	li .current-menu-ancestor > a,
	li .current_page_item > a,
	li .current_page_parent > a,
	li .current_page_ancestor > a {
		background-color: $accent-secondary;
		color: $text-on-accent;
	}

	// Arrows
	// -----------------------------------

	// First Level (Facing Down)
	.menu-item-has-children > a::after,
	.page_item_has_children > a::after {
		content: "\f0d7";
		font-family: FontAwesome;
		font-size: 10px;
		position: relative;
		top: -5px;
		right: -4px;
		line-height: normal;
	}

	// Sub-Menus (Facing Right)
	li .menu-item-has-children > a,
	li .page_item_has_children > a {
		padding-right: 25px;

		&::after {
			content: "\f0da";
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			font-size: 12px;
		}
	}

	// Nav Buttons
	// -----------------------------------
	.nav-button {
		> a {
			border: 2px solid $accent-color;
			border-radius: 30px;
			padding: 12px 30px;
			margin-left: 10px;
			font-size: 12px;

			&::before {
				display: none;
			}

			&:hover {
				background-color: $accent-color;
				color: $text-on-accent;
			}
		}

		&:last-child {
			> a {
				margin-right: 0;
			}
		}
	}

	// Mega Menus
	// -----------------------------------
	.mega-menu {
		> ul {
			display: flex;

			> li {
				> a {
					font-weight: 700;
					font-size: 1.05em;
				}

				> a,
				& > a:focus,
				&.current-menu-item > a,
				&.current-menu-parent > a,
				&.current-menu-ancestor > a {
					background-color: transparent;
					color: initial;
				}
			}

			ul {
				display: block;
				opacity: 1;
				box-shadow: none;
				padding: 0;
				margin: 0;
				position: static;
				background: none;
				min-width: 180px;
				transform: translate(0, 10px);
			}

			a {
				&::after {
					display: none;
				}
			}
		}

		&:hover {
			ul {
				ul {
					opacity: 1;
					visibility: visible;
					transform: none;
					transition-delay: 0s;
				}
			}
		}
	}
}

// Open the last submenu of the menu always on the left
.navigation-main-right {
	text-align: right;

	> li:last-child {
		ul {
			right: 0;
		}

		ul ul {
			left: auto;
			right: 100%;
		}

		.menu-item-has-children > a,
		.page_item_has_children > a {
			&::after {
				content: "\f0d9";
				font-size: 12px;
			}
		}
	}
}