.top-bar-container {
	height: var(--top-bar-height);
	color: white;
	z-index: 2;
	position: fixed;
	width: 100%;
	justify-items: center;
	padding: 0 24px;
	background-color: var(--color-surface-1);
	align-content: center;
}

.top-bar {
	display: flex;
	padding: 0 env(safe-area-inset-right, 0) 0 env(safe-area-inset-left, 0);
	width: 100%;
	height: 100%;
	justify-content: space-between;
	max-width: calc(var(--page-maximum-width) - 80px);
	align-items: center;
	margin: auto;
	background-color: var(--color-surface-1);
	position: relative;
	z-index: 1;
}

.top-bar-hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: end;
	gap: 3px;
	width: 36px;
	height: 36px;
	cursor: pointer;
}

.top-bar-hamburger-line {
	display: flex;
	filter: invert(1);
	transition: transform 150ms ease-in-out;
	transform-origin: center;
	width: 17px;
	height: 2px;
}

.top-bar-hamburger.selected .top-bar-hamburger-line:nth-child(1) {
	transform: translateY(5.25px) rotate(45deg) scaleX(1.3);
}

.top-bar-hamburger.selected .top-bar-hamburger-line:nth-child(2) {
	transform: scaleX(0);
}

.top-bar-hamburger.selected .top-bar-hamburger-line:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg) scaleX(1.3);
}

body.top-bar-menu-open {
	overflow: hidden; /* prevents background scroll when the menu is open */
}

.top-bar-link {
	font: var(--font-l-bold);
	align-items: center;
	display: none;
	color: var(--color-interactive-1-default);
	padding: 0 4px;
}

.top-bar-link:active {
	color: var(--color-interactive-1-pressed);
}

.top-bar-link-active-route {
	color: var(--color-interactive-1-active);
}

.top-bar-menu {
	display: none;
	background-color: var(--color-surface-1);
	position: fixed;
	left: 0;
	right: 0;
	top: var(--top-bar-height);
	bottom: 0;
	flex-direction: column;
	gap: 36px;
	overflow: auto;
	scrollbar-width: none;
}

.top-bar-menu-visible {
	display: flex;
}

.top-bar-menu-link {
	text-decoration: none;
	color: var(--color-interactive-1-default);
}

.top-bar-menu-link:active {
	color: var(--color-interactive-1-pressed);
}

.top-bar-menu-link-active {
	color: var(--color-interactive-1-active);
}

.top-bar-login-inbox-button {
	height: 44px;
	display: none;
	padding: 0 24px;
	font: var(--font-label-l);
	background: var(--color-background-3-default);
	color: var(--color-text-1);
	align-items: center;
	border-radius: 9999px;
}

.top-bar-login-inbox-button:active {
	background: var(--color-background-3-pressed);
	color: var(--color-text-1);
}

.top-bar-login-inbox-button:focus-visible {
	outline-offset: 1px;
}

.top-bar-logo-animation {
	height: 24px;
	position: absolute;
}

@media screen and (min-width: 960px) {
	.top-bar {
		height: 64px;
	}

	.top-bar-container {
		padding: 0 40px;
	}

	.top-bar-link {
		display: flex;
	}

	.top-bar-login-inbox-button {
		display: flex;
	}

	.top-bar-menu-button {
		display: none;
	}

	.top-bar-menu-visible {
		display: none;
	}

	body.top-bar-menu-open {
		overflow: auto;
	}
}