div#top {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	padding: 0 15px;

	@media($max-mobile-viewport) {
		flex-direction: column;
	}
}

div#header {
	padding: 0;
	max-width: calc(#{$width} + 100px);
}

#logo{
	&.has-logo {
		flex-basis: #{extract-width($header-logo-size)};
		flex-shrink: 1;
		flex-grow: 1;

		a::before {
			background-position: left;
			margin-top: 15px;
			margin-right: 1rem;
		}
	}

	@media($max-mobile-viewport) {
		width: 100%;
		padding-left: 0;
	}
}

nav.site-nav {
	flex-grow: 1;
}

div.gru-nav {
	display: flex;
	align-items: center;

	.gru-nav-button {
		top: 15px;
		right: 15px;
		left: auto;

		&.toggled .icon-bar {
			background: $nav-button-color;
		}

		& + ul {
			@media($min-desktop-viewport) {
				position: static;
			}
			width: 100%;

			&:before {
				height: 0;
			}
		}

		&.toggled + ul {
			height: fit-content;
		}
	}

	.menu {
		position: static;
		margin: 0;
		flex-grow: 1;
		display: flex;
		justify-content: space-evenly;

		&--link {
			padding: 0;

			display: flex;
			align-items: center;

			font-weight: normal;

			@media ($min-desktop-viewport) {
				height: $header-height;
				margin-right: 1rem;
			}
		}

		&--label {
			text-align: center;
		}
	}

	.submenu {
		&--link {
			padding: 20px 25px;
			font-weight: normal;
		}
	}
}

@media($max-mobile-viewport) {
	// Header always visible on scroll
	div#top {
		position: fixed;
		z-index: 1001;
		width: 100%;
		height: $header-height;

		background: white;
	}

	nav.site-nav {
		position: absolute;
		top: $header-height;
		left: 0;
		width: 100%;
	}

	div.gru-nav {
		height: 0;

		&.toggled {
			height: calc(100vh - #{$header-height});
		}

		// right-to-left slide menu
		> .gru-nav-button + ul {
			top: $header-height;
			transform: translateX(100vw);
		}

		.menu, .submenu {
			&--item {
				padding: 0;
				border-top: 1px solid $gray;

				&, &:hover, &:focus-within, &.selected {
					> a {
						border-bottom: none;
						color: $gray-dark;
					}
				}
			}

			&--link {
				padding: 1rem 1.5rem;
				font-size: $font-size;

				&:after {
					position: absolute;
					right: 3.5rem;

					content: '\f054';
					font-family: FontAwesome;
					font-size: 0.6rem;
				}
			}
		}

		.submenu {
			&--link {
				padding-left: 3rem;
			}
		}
	}
}

div#toplinks {
	position: static;
	max-width: 100%;

	@media($max-mobile-viewport) {
		padding: 0;

		display: flex;
		flex-grow: 1;
		justify-content: center;
	}

	.toplinks--list {
		display: flex;
		flex-wrap: wrap;

		> * {
			margin: 0 .3rem;
		}

		&-item,
		a {
			color: black;
			font-weight: 500;
			display: flex;
			align-items: center;
		}

		.login-link, .account-link {
			&::before {
				font-family: FontAwesome;
				content: '';
				width: 1.5rem;
				height: 1.5rem;
				background: center / contain no-repeat url('/assets/profile:icon');
				margin-right: 0.5rem;
			}
			margin-right: 0.5em;
		}
	}
}
