/* Sets the containers height and width */
.base-timer {
    position: relative;
    height: 15vh;
    width: 15vh;
}

/* Removes SVG styling that would hide the time label */
.base-timer__circle {
    fill: none;
    stroke: none;
}

/* The SVG path that displays the timer's progress */
.base-timer__path-elapsed {
    stroke-width: 7px;
    stroke: grey;
}

.base-timer__label {
    position: absolute;
    /* Size should match the parent container */
    width: 15vh;
    height: 15vh;
    /* Keep the label aligned to the top */
    top: 0;
    /*padding-bottom: 100px;*/
    /* Create a flexible box that centers content vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Set the label size */
    font-size: 4vh;
}

.base-timer__path-remaining {
    /* Just as thick as the original ring */
    stroke-width: 7px;

    /* Rounds the line endings to create a seamless circle */
    stroke-linecap: round;

    /* Makes sure the animation starts at the tip of the circle */
    transform: rotate(90deg);
    transform-origin: center;

    /* One second aligns with the speed of the countdown timer */
    transition: 1s linear all;

    /* Allows the ring to change color when the color value updates */
    stroke: currentColor;    
}

.base-timer__svg {
    /* Flips the svg and makes the animation to move left-to-right */
    transform: scaleX(-1);
}

.color-orange {
    color: orange;
}

.color-green {
    color: palegreen;
}

.color-yellow {
    color: yellow;
}

.color-red {
    color: red;
}