.site-header {
	position: sticky;
	top: 0;
	z-index: 1001;
}

div#header {
	padding-top: $header-mobile-padding-v;
	padding-right: $header-mobile-padding-h;
	padding-left: $header-mobile-padding-h;
	max-width: $header-width;

	// bottom padding is managed by the nav
	padding-bottom: 0;

	@media ($min-desktop-viewport) {
		padding-top: $header-desktop-padding-v;
		padding-right: $header-desktop-padding-h;
		padding-left: $header-desktop-padding-h;
	}
}

div#top {
	display: flex;
	flex-direction: column;

	@media($min-desktop-viewport) {
		flex-direction: row;
	}
}

#logo {
	font-size: $font-size;
	padding-left: 0;

	@media ($min-desktop-viewport) {
		margin-bottom: $header-desktop-padding-v;
	}
}

#toplinks {
	position: static;
	max-width: 100%;
	display: flex;
	align-items: center;
	padding-bottom: $header-desktop-padding-v;

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

	.login, .logged-in {
		flex-grow: 1;
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
		gap: $space-small;

		.login-link, .account-link {
			@extend %button;
			margin: 0;
			padding: $space-xsmall $space-small;
		}

		.user-info--separator {
			display: none;
		}

		.logout, .registration {
			@extend .cd28-button-secondary-dark;
			margin: 0;
			padding: $space-xsmall $space-large;
		}
	}
}
