@import '~normalize.css/normalize.css';
@import '~@amber-ds/visual/src/_variables.scss';

.progress {
  transform: rotate(-90deg);

  .progress-circle,
  .progress-value {
    fill: transparent;
  }

  .progress-circle {
    stroke: $grey-lighter;
  }

  .progress-value {
    stroke: $orange;
    stroke-linecap: round; // optional
  }
}

.determinate {
  .progress-value {
    transition: stroke-dashoffset 1s ease;
  }
}

.indeterminate {
  .progress {
    animation: rotate 1s linear infinite;
  }

  .progress-circle {
    //stroke: transparent; // optional
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}