/* ==========================================================================
 * Progress Circle
 * ========================================================================== */

@define-mixin mds-c-progress-circle--theme $color {
  circle:nth-child(1) {
    stroke: $color;
  }
}

.mds-c-progress-circle {
  border-radius: 50%;
  display: inline-block;
  overflow: hidden;
  padding: var(--mds-d-spacing--xs);
  position: relative;
  vertical-align: middle;

  circle:nth-child(1) {
    stroke: var(--mds-t-text-color--primary);
  }

  &--inset {
    margin: calc(var(--mds-d-spacing--xs) * -1);
  }

  &--theme-info {
    @mixin mds-c-progress-circle--theme var(--mds-t-color--blue);
  }

  &--theme-success {
    @mixin mds-c-progress-circle--theme var(--mds-t-color--green);
  }

  &--theme-warning {
    @mixin mds-c-progress-circle--theme var(--mds-t-color--orange);
  }

  &--theme-danger {
    @mixin mds-c-progress-circle--theme var(--mds-t-color--red);
  }
}

.mds-c-progress-circle__svg {
  border-radius: 50%;
  bottom: 0;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleX(-1) rotate(-90deg);
  width: 100%;

  .mds-c-progress-circle.mds-is-invisible & {
    visibility: hidden;
  }
}

.mds-c-progress-circle__stroke {
  fill: none;
  stroke-width: var(--mds-d-spacing--sm);
  transition-duration: 0.2s;
  transition-property: stroke-dashoffset;
  transition-timing-function: ease-in;

  &:nth-child(2) {
    stroke: var(--mds-t-background-color--tertiary);
    stroke-dasharray: 314.1592%;

    @for $i from 0 to 100 {
      .mds-c-progress-circle[data-percentage='$i'] & {
        stroke-dashoffset: calc(314.1592% * ($(i) / 100));

        /* transition-duration: calc(1s * ($(i) / 50)); */
      }
    }
  }
}