.stopwatch-circular-chart {
  height: var(--stopwatch-size, 18rem);
  width: var(--stopwatch-size, 18rem);
  max-height: var(--stopwatch-max-size, calc(100vh - 64px));
  max-width: var(--stopwatch-max-size, calc(100vh - 64px));
  margin: var(--stopwatch-margin-top, 8px) var(--stopwatch-margin-end, 8px) var(--stopwatch-margin-bottom, 8px)
    var(--stopwatch-margin-start, 8px);
  display: block;
}

.stopwatch-circle-bg {
  fill: none;
  stroke: var(--stopwatch-background, #eee);
  stroke-width: var(--stopwatch-stroke-outer-width, 2.8);
}

.stopwatch-circle {
  stroke: var(--ion-color-primary);
  fill: none;
  stroke-width: var(--stopwatch-stroke-inner-width, 1.8);
  stroke-linecap: round;

  &.stopwatch-circle-warn-one-minute {
    stroke: var(--ion-color-secondary);
  }

  &.stopwatch-circle-warn-ending {
    stroke: var(--ion-color-tertiary);
  }
}

.stopwatch-remaining-time {
  font-size: var(--stopwatch-text-size, 0.2em);
  text-anchor: middle;
  font-weight: 300;
  fill: var(--ion-text-color);
}
