/*! Header: Primary Menu */
.primary-menu {

	/* A toggling parent item with children */
	.menu-item-has-children {

		& svg {
			color: currentColor;
			display: inline-block;
			height: 0.55rem;
			margin-left: 0.25rem;
			width: 0.55rem;
		}

		&:hover,
		&.child-has-focus {

			> .sub-menu {
				@include media(large) {
					display: block;
				}
			}
		}
	}

	/* First submenu */
	> li > .sub-menu {
		position: relative;

		@include media(large) {
			position: absolute;
			top: 165%;
		}

		/* Upward dark arrow on top of the flyout sub-menu */
		&::before {
			border-bottom: 10px solid var(--go-submenu--color--background, var(--go-heading--color--text));
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			content: "";
			display: inline-block;
			height: 0;
			left: 5%;
			position: absolute;
			top: -10px;
			transform: translateX(-10px);
			width: 0;

			@include media(large) {
				left: 50%;
			}
		}

		/* Spacer to fix menu hovers */
		&::after {
			bottom: 100%;
			content: "";
			height: 1.75rem;
			left: 0;
			position: absolute;
			right: 0;
			width: 100%;
		}
	}

	/* All other submenus */
	.sub-menu {
		background-color: var(--go-submenu--color--background, var(--go-heading--color--text));
		list-style: none;
		margin: 0;
		padding: 0 1rem;
		z-index: 999;

		@include media(large) {
			display: none;
			left: 50%;
			padding: 0.75rem;
			position: absolute;
			text-align: center;
			transform: translateX(-50%);
			width: 200px;
		}

		/* All submenu link containers (<li>) */
		.menu-item {
			white-space: normal;

			@include media(large) {
				display: block;
				margin-left: 0;
			}
		}

		/* All submenu links */
		a {
			color: var(--go-submenu--color--text, var(--go--color--white));
			width: 100%;

			@include media(large) {
				padding-bottom: 0.35rem;
				padding-top: 0.35rem;
			}

			&::after {
				display: none;
			}

			&:focus {
				@include outline;
				outline-color: var(--go-submenu--color--text, hsla(0, 0%, 100%, 0.25));
				outline-offset: 0;
			}
		}
	}

	/* Tertiary submenu */
	.sub-menu .sub-menu {
		display: block;
		left: 0;
		margin: 0;
		padding: 0;
		position: relative;
		transform: none;
		width: auto;
	}

	&.primary-menu--hide-medium {
		@include media(medium) {
			opacity: 0;
			pointer-events: none;
		}
	}
}

/* Flip icon when item is expanded */
.submenu-is-open {

	svg {
		transform: rotate(180deg);
		z-index: 9999;
	}
}
