@keyframes rollOutOfFocus {
	from {
		transform: translateY(-100%);
	}
	
	to {
		transform: translateY(100%);
	}
} 

@keyframes rollIntoFocus {
	from {
		transform: translateY(-100%);
	}
	
	to {
		transform: translateY(0);
	}
} 

.percentage__display {
	font-size: 16px;
	width: 3.52em;
	display: flex;
	gap: 8px;
	flex-direction: column;
	text-align: center;
}

.bar__bg {
	stroke: #d9d9d9;
}

.bar__bg, .bar {
	stroke-width: 0.705em;
}

.bar {
	transition: stroke-dashoffset .4s var(--bar-delay, 0s);
	stroke-dashoffset: 360;
}

.percentage__display__progress--bad .bar {
	stroke: #BE3455;
}

.percentage__display__progress--fair .bar {
	stroke: #ecba3f;
}

.percentage__display__progress--good .bar {
	stroke: #07992a;
}

.animated .bar {
	stroke-dashoffset: var(--percentage);
}

.percentage__display__progress {
	position: relative;
	width: 100%;
}

.progress {
	position: absolute;
	font-size: 1em;
	line-height: 2;
	top: calc(50% - 1em);
	width: 100%;
	color: #000;
	font-weight: bold;
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.progress__percentage {
	display: flex;
	letter-spacing: -0.03em;
}

.progress__percentage div {
	transform: translateY(-100%);
}

.animated .progress__percentage div {
	animation: rollOutOfFocus, rollIntoFocus;
	animation-duration: 0.8s, 0.4s;
	animation-delay: calc(var(--number-delay) + 0s), calc(var(--number-delay) + 0.8s);
	animation-iteration-count: 1, 1;
	animation-fill-mode: forwards;
}

.animated .progress__percentage div:last-child {
	animation-delay: calc(var(--number-delay) + 0.2s), calc(var(--number-delay) + 1s);
}

.progress__chart {
	display: block;
}