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

/* -----------------------------------------
	02. Main Navigation
----------------------------------------- */
.nav {
	display: flex;
	align-items: center;

	@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);
		margin-left: 12px;
	}

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

	> li:first-child {
		ul {
			margin-left: 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 {
				&::after {
					content: "\f0d9";
					font-size: 12px;
				}
			}
		}

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

	// Development only
	//> li:nth-child(4),
	//> li:nth-child(2) {
	//	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: 12px 0;
		list-style: none;
		background-color: $white;
		min-width: 220px;
		border-radius: 3px;
		box-shadow: 0 0 24px rgba($black, .08);
		line-height: normal;
	}

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

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

	// Default Styles
	> li {
		line-height: 1;

		> ul {
			&::before {
				content: "";
				position: absolute;
				top: -12px;
				left: 10px;
				border: 6px solid transparent;
				border-bottom-color: $white;
				width: 0;
				height: 0;
			}
		}

		&.fas,
		&.far,
		&.fab {
			font-family: $primary-font;
			font-weight: normal;
			line-height: 1;

			&:not(:first-child) {
				margin-left: 10px;
			}

			> a {
				display: inline-block;
				margin-left: 0;
			}

			&::before {
				color: $accent-color;
				margin-right: 5px;
				font-size: 0.85em;
			}
		}

		&.fas {
			&::before {
				font-family: $font-awesome;
				font-weight: 900;
			}
		}

		&.far {
			&::before {
				font-family: $font-awesome;
				font-weight: 400;
			}
		}

		&.fab {
			&::before {
				font-family: $font-awesome-brands;
				font-weight: 400;
			}
		}
	}

	> li > a {
		padding: 15px 0;
		margin: 0 12px;
		color: $white;
	}


	> li:first-child {
		> a {
			margin-left: 0;
		}
	}

	// Special first menu items
	> .menu-item-first {
		@include media-breakpoint-up(xl) {
			width: 205px;
		}
	}

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

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

	// Default Styles
	li li a {
		padding: 6px 15px;
		font-size: 14px;
	}

	// 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_ancestor > a,
	li .current_page_item > a {
		color: $accent-color;
	}

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

	// First Level (Facing Down)
	.menu-item-has-children > a::after,
	.page_item_has_children > a::after {
		@include font-awesome(\f107);
		font-size: 8px;
		position: relative;
		top: -2px;
		right: -5px;
		line-height: normal;
		color: $accent-color;
	}

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

		&::after {
			@include font-awesome(\f105);
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			color: inherit;
		}
	}

	// Nav Buttons
	// -----------------------------------
	.nav-button {
		> a {
			border: 0;
			border-radius: $border-radius-base;
			padding: 4px 28px 5px;
			margin-left: 10px;
			background-color: $accent-color;
			font-size: 15px;

			&:hover {
				color: $white;
			}

			&::before {
				display: none;
			}
		}

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

// 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 {
			&::after {
				content: "\f0d9";
				font-size: 12px;
			}
		}
	}
}

.navigation-secondary {
	margin-left: auto;
}
