@use '../../../../shared/styles/variables' as *;

.battery-circle {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.battery-circle__svg {
  width: 100%;
  height: 100%;
}

.battery-circle__track,
.battery-circle__progress {
  fill: none;
}

.battery-circle__track {
  stroke: $color-border-accent;
}

.battery-circle__progress {
  stroke-linecap: round;
  transition:
    stroke-dashoffset 0.35s ease,
    stroke 0.25s ease;
}

.battery-circle__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: $font-size-44;
  font-weight: 500;
  line-height: 1;
  color: $black;
}
