@import "../common/defaults";
@import "../common/mixins";
@import "../common/media_querys";

$offset: 187;
$duration: 1.4s;


//Animations
@include keyframe(dash) {
  0% {
    stroke-dashoffset: $offset;
  }
  50% {
    stroke-dashoffset: $offset/4;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: $offset;
    transform: rotate(450deg);
  }
}

@include keyframe(color) {
  100%, 0% {
    stroke: $color-accent;
  }
  40% {
    stroke: $color-primary;
  }
  66% {
    stroke: $color-accent;
  }
  80%, 90% {
    stroke: $color-primary;
  }
}

@include keyframe(rotate) {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.progress {

  @include animation(rotate $duration linear infinite);

  .progress-path {
    stroke-dasharray: $offset;
    stroke-dashoffset: 0;
    transform-origin: center;
    stroke-width: 4px;
    @include animation(
                    dash $duration ease-in-out infinite,
                    color ($duration*4) ease-in-out infinite);

  }

  //sizes
  &.size-sm {
    height: 48px;
    width: 48px;

    .progress-path {
      stroke-width: 4;
    }
  }

  &.size-md {
    height: 64px;
    width: 64px;

    .progress-path {
      stroke-width: 2;
    }
  }

  &.size-lg {
    height: 128px;
    width: 128px;

    .progress-path {
      stroke-width: 2;
    }
  }

}