// Header
.site-header {
	padding: 1em 0;
}

div#header {
	padding: 0 0.5rem;
	display: flex;

	@media ($max-mobile-viewport) {
		&::after {
			content: "";
			min-width: 3.2rem;
		}
	}
}

#logo {
	display: flex;
	flex-grow: 1;
	padding-left: 0;

	&.has-logo a {
		flex-grow: 1;
		margin-right: 0;
		max-width: 300px;
		min-height: 60px;
	}
}

div#top {
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
}

.gru-nav-wrapper {
	@media ($min-desktop-viewport) {
		box-shadow: $box-shadow;
	}

	@media ($max-mobile-viewport) {
		margin-top: 0;
	}
}

div#toplinks {
	position: static;
	display: flex;
	justify-content: center;

	> span {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.account-link,
	.login-link,
	.logout,
	.registration
	{
		@extend %inverted-button;

		padding: 0.3rem 1rem;
		margin: 0.25rem 0.25rem;
		margin-right: 0;
	}
}

/// Nav
div.gru-nav {
	.gru-nav-button {
		position: absolute;
		top: 27px;
		right: 1rem;

		border: 1px solid $gray-3;
		border-radius: $border-radius;

		.icon-bar {
			border-radius: $border-radius;
		}
	}

	.menu {
		display: flex;
		justify-content: space-evenly;
		margin: 0;
		overflow: visible;

		@media ($max-mobile-viewport) {
			border-bottom: 1px solid $gray-2;
		}

		&--item {
			position: relative;
			justify-content: center;
		}

		&--link {
			display: flex;
			flex-direction: column;
			padding: 0;

			@media ($min-desktop-viewport) {
				align-items: center;

				&:after {
					width: 0;
					height: 5px;

					background: $blue-2;
					transition: all .2s $transition-mode;

					content: "";
				}

				&:hover::after {
					width: 100%;
				}
			}

			@media ($max-mobile-viewport) {
				border-top: 1px solid $gray-2;
			}
		}

		&--label {
			padding-top: 1em;
			padding-bottom: calc(1em - 5px);

			@media ($max-mobile-viewport) {
				padding: 0.5rem 1rem;
			}
		}

	}

	.submenu {
		left: 0;
		top: 100%;
		min-width: max-content;
		
		@media ($min-desktop-viewport) {
			padding-top: 1em;
			padding-bottom: 1em;

			// Animated bar under menu links
			&::before {
				position: absolute;
				top: 0;
				left: -100vw;
				width: 200vw;
				height: 100%;
				z-index: -1;

				background: white;
				box-shadow: inset 0 0.3rem 0.5rem rgba(125,130,135,0.3);

				content: "";
			}
		}

		@media ($max-mobile-viewport) {
			background: $gray-1;
		}

		&--item {
			padding-bottom: 0.5rem;
			@media ($max-mobile-viewport) {
				padding: 0.5rem 0;
			}
		}

		&--label {
			font-weight: 400;
			line-height: normal;
		}

		&--link {
			position: relative;
			display: flex;
			padding: 0 0 0 2rem;

			line-height: normal;

			// animated bar left of submenu links
			@media ($min-desktop-viewport) {
				&:hover {
					color: $blue-2;
				}

				&::before, &::after {
					position: absolute;
					top: 50%;
					left: 0;
					width: 1.5rem;
					height: 2px;

					content: '';
				}

				&::before {
					background: $gray-2;
				}

				&::after {
					width: 0;

					background: $blue-2;
					transition: 0.5s width $transition-mode;
				}

				&:hover::after {
					width: 1.5rem;
				}
			}
		}
	}
}
