/* ! Add breakpoints into the DOM for JS hooks */
body::before {
	content: "has-offscreen-nav";
	display: none;

	@include media(large) {
		content: "has-full-nav has-search-toggle";
	}
}

/*! Offscreen Navigation */
.menu-is-open {
	@include media(large-only) {
		overflow: hidden;

		.header__navigation {
			background-color: var(--go-header--color--background, var(--go--color--background));
			font-size: 1.5rem;
			opacity: 1;
			padding-bottom: var(--go-header--padding--y, 3vw);
			padding-left: var(--go-block--padding--x);
			padding-right: var(--go-block--padding--x);
			padding-top: 70px; /* This needs to be auto-generated based on the header height */
			pointer-events: auto;
			text-align: center;
			visibility: visible;

			a {
				display: block;
				font-size: 3.25vmin;
				padding: 0.25rem;

				@include media(small-only) {
					font-size: 1rem;
				}

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

		.header__navigation-inner {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			flex-shrink: 1;
			position: relative;
		}

		.header__navigation-inner > div {
			display: block;
			height: 100%;
			left: 0;
			overflow-x: hidden;
			overflow-y: scroll;
			position: absolute;
			top: 0;
			width: 100%;
		}

		.primary-menu {
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: center;
			left: 0;
			min-height: min-content;
			overflow: auto;
			position: absolute;
			top: 0;
			width: 100%;

			li {
				text-align: left;

				svg {
					right: 0;
				}
			}

			.sub-menu {
				margin-bottom: 1rem;

				&::before {
					display: none;
				}

				li {

					&:first-child {
						padding-top: 0.75rem;
					}

					&:last-child {
						padding-bottom: 0.75rem;
					}
				}
			}

			.sub-menu li a {
				font-size: 2.25vmin;

				@include media(small-only) {
					font-size: 0.85rem;
				}
			}

			.menu-item-has-children svg {
				height: 2.25rem;
				margin-left: 0.5rem;
				padding: 0.75rem;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				transition: opacity 0.75s;
				width: 2.25rem;

				&:hover {
					opacity: 0.5;
				}
			}

			.submenu-is-open svg {
				transform: translateY(-50%) rotate(180deg);
			}
		}
	}
}
