.base-timer {
	position: relative;
	width: 300px;
	height: 300px;
}

.base-timer__svg {
	transform: scaleX(-1);
}

.base-timer__circle {
	fill: none;
	stroke: none;
}

.base-timer__path-elapsed {
	stroke-width: 7px;
	stroke: grey;
}

.base-timer__path-remaining {
	stroke-width: 7px;
	stroke-linecap: round;
	transform: rotate(90deg);
	transform-origin: center;
	transition: 1s linear all;
	fill-rule: nonzero;
	stroke: currentColor;
}

.base-timer__path-remaining.green {
	color: rgb(65, 184, 131);
}

.base-timer__path-remaining.orange {
	color: orange;
}

.base-timer__path-remaining.red {
	color: red;
}

.base-timer__label {
	position: absolute;
	width: 300px;
	height: 300px;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
}