.progressContainer {
	position: relative;
	width: 100%;
	height: 18px;
	background-color: var(--color-accent-low);
}

.progressBar {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background-color: var(--color-accent);
	transition:
		width 0.5s ease-in-out,
		background-color 0.3s ease;
	z-index: 1;
}

.gameMarker {
	position: absolute;
	top: 0;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--s-1);
	z-index: 2;
	pointer-events: none;
	transform: translateX(-50%);
}

.gameMarkerLine {
	width: 2px;
	height: 100%;
	background-color: var(--color-text);
	opacity: 0.6;
}

.maxTimeMarker {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--s-1);
	z-index: 2;
	pointer-events: none;
	padding-right: var(--s-1);
}

.gameMarkerText {
	font-size: var(--font-2xs);
	font-weight: var(--weight-semi);
	white-space: nowrap;
}

.gameMarkerHidden .gameMarkerText {
	visibility: hidden;
}