/*-- 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;
}

.timer-reset {
  cursor: pointer;
}

.timer-reset-bg {
  fill: transparent;
  pointer-events: all;
  transition: fill 0.2s ease-in-out;
}

.timer-reset:hover .timer-reset-bg {
  fill: rgba(0, 0, 0, 0.1);
}

.timer-reset-icon {
  stroke: grey;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: stroke 0.2s ease-in-out;
}

.timer-reset:hover .timer-reset-icon {
  stroke: black;
}