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

.base-timer text {
  font-family: 'Helvetica Neue', sans-serif !important;
  font-weight: normal; /* 必要に応じて bold にも */
  fill: currentColor; /* 色を継承 */
}