.progressbar-container {
	width: 100%;
	background-color: rgba(0, 0, 0, 0.326);
	/* border-left: .1em solid #fefefe;
	border-right: .1rem solid #fefefe; */
	border-radius: .08rem;
	margin: .2rem 0;
	padding: 0 .2rem;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	display: flex;
	font-family: 'Courier New', Courier, monospace;
}

.progressbar {
	height: .5em;
	background-color: #eeeeee;
	width: 0;
	position: relative;
	overflow: hidden;
	transition: width 2s ease;
}

.progressbar-blocks {
	display: flex;
	gap: 1%;
	justify-content: space-between;
	width: 100%;
}

.progressbar-block {
	height: .5em;
	width: 100%;
	background-color: transparent;
	transition: background-color 0.5s ease-in-out, transform 0.5s ease;

	&:hover {
		transform: scaleX(1.04);
		background-color: #e0e0e0;
	}
}

.progressbar-block.filled {
	background-color: #fff;
	animation: fillBlock 0.5s ease forwards;
}

@keyframes fillBlock {
	0% {
		background-color: transparent;
	}

	100% {
		background-color: #fff;
	}
}

@keyframes growProgressBar {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

.progressbar.animate {
	animation: growProgressBar 2s ease forwards;
}