/*-- scss:rules --*/
/* Timer Countdown */

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

div.base-timer svg circle, div.base-timer svg path {
    fill: none;
}

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

.base-timer__path-remaining {
  stroke-width: 7px;
  stroke-linecap: round;
  transform-origin: center;
  /* data update happens every 1s so keep transition duration as less,
     otherwise you get strange behaviour, mainly jumps */
  transition: 0.1s ease-in-out all;
  fill-rule: nonzero;
  stroke: currentColor;
}

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

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

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