@use '../../tokens';
@use '../../utils';

@function _token($token) {
  @return utils.map-get(tokens.$flexy-comp-progresscircle, $token);
}

$_radius: calc((_token('container-size') - _token('track-height')) / 2);
$_circumference: calc(2 * 3.14285714 * $_radius);
$_progress: var(--progress, 0);

.flexy-progresscircle {
  display: block;
  @include utils.size(_token('container-size'));
  position: relative;

  svg {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform-origin: center;
  }

  &__inactive-track,
  &__active-track {
    cx: calc(_token('container-size') / 2);
    cy: calc(_token('container-size') / 2);
    r: $_radius;
    fill: none;
    stroke-dasharray: $_circumference;
    stroke-width: _token('track-height');
    transform-origin: center;
  }

  &__inactive-track {
    stroke: _token('track-inactive-color');
    opacity: _token('track-inactive-opacity');
  }

  &__active-track {
    stroke-dashoffset: calc($_circumference * (1 - $_progress));
    stroke: _token('track-active-color');
    transform: rotateZ(-90deg);
    transition: stroke-dashoffset _token('jump-animation-duration') linear 0ms;
  }

  &:not([aria-valuenow]) &__active-track {
    animation: flexy-indeterminate-progresscircle-rotate-1
      _token('indeterminate-animation-duration') linear 0ms infinite;
    stroke-dashoffset: calc($_circumference * 0.75);
  }
}

@keyframes flexy-indeterminate-progresscircle-rotate-1 {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes flexy-indeterminate-progresscircle-rotate-2 {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(90deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes flexy-indeterminate-progresscircle-stroke {
  0% {
    stroke-dashoffset: calc($_circumference * 0.95);
  }
  50% {
    stroke-dashoffset: calc($_circumference * 0.25);
  }
  100% {
    stroke-dashoffset: calc($_circumference * 0.95);
  }
}