.site-nav {
	@media($max-mobile-viewport) {
		order: 1;
	}
}

.gru-nav-wrapper {
	margin-top: 0;
}

div.gru-nav .gru-nav-button {
	position: absolute;

	top: calc(#{$header-mobile-padding-v} + (#{$header-logo-height} - #{$nav-menu-side}) / 2);
	right: $space-small;

	&.toggled + ul {
		height: 100vh;
		// add the maximum header-height as bottom padding, to allow scrolling to the bottom of the menu
		padding-bottom: 200px;
		overflow: scroll;
	}
}

.site-nav {
	flex-grow: 1;
	margin-right: $space-medium;

	@media($max-mobile-viewport) {
		// navigation makes bottom padding of header, so it opens right
		// beneath
		margin-top: $header-mobile-padding-v;
		height: 0;
		// cancell header horizontal padding for the menu to screen width
		margin-right: -$header-mobile-padding-h;
		margin-left: -$header-mobile-padding-h;
	}

	.menu, .submenu {
		margin: 0;

		&--link {
			display: flex;
			border: $border-width-1 solid transparent;
			padding: $space-small $space-medium;

			@media($min-desktop-viewport) {
				padding: $space-small $space-large;
			}

			&:focus-visible, &:focus-within {
				border-color: $yellow-4;
				outline: none;
			}

			&:hover {
				background: $yellow-4;
				border-color: $yellow-4;
				color: $gray-9;
			}
		}

		&--label {
			flex-grow: 1;
			font-weight: $font-weight-6;
		}
	}


	.menu {
		@media($max-mobile-viewport) {
			padding: 0 $space-medium;
			border-top: 0 !important;
		}

		@media($min-desktop-viewport) {
			display: flex;
			justify-content: end;
		}

		&--item {
			@media($max-mobile-viewport) {
				&:not(:first-child) {
					border-top: $border-width-0 solid $gray-5;
				}
			}

			@media($min-desktop-viewport) {
				// Menu items create the bottom padding for the header here, so
				// they reach the bottom of the header and stay hovered when
				// moving the mouse to the submenu.
				min-height: calc(#{$header-logo-height} + #{$header-desktop-padding-v});
				padding-bottom: $header-desktop-padding-v;

				// border-bottom when mouse in in submenu
				&:hover .menu--link {
					border-bottom-color: $yellow-4;

					&:not(:hover) {
						color: white;
					}
				}

				&:focus, &:focus-within {
					.menu--link {
						color: white;
					}
				}
			}

			&.selected .menu--link {
				border-bottom-color: $yellow-4 !important;
			}
		}

		&--link {
			margin: 0;

			&::after {
				content: "\ea6e"; // arrow-right-s-line
				font-family: "RemixIcon";

				@media($min-desktop-viewport) {
					content: none;
				}
			}
		}
	}

	.submenu {
		padding: 0 $space-medium;

		// dekstop menu dropdown
		@media($min-desktop-viewport) {
			position: absolute;
			top: calc(#{$header-logo-height} + 2 * #{$header-desktop-padding-v});
			box-shadow: $shadow-8;
			border-radius: 0 0 20px 20px;
		}

		&--item:not(:first-child) {
			border-top: $border-width-0 solid $gray-3;

			@media($min-desktop-viewport) {
				border-top-color: $gray-5;
			}
		}

		&--link {
			&::before {
				content: "\ea6e"; // arrow-right-s-line
				font-family: "RemixIcon";
				margin-right: $space-medium;
			}
		}
	}
}
