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

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

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

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

.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.blue {
color: #2D9AED;
}

.base-timer__path-remaining.orange {
color: #2D9AED;
}

.base-timer__path-remaining.red {
color: #2D9AED;
}

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