@mixin chart-value($n, $i: 0) {
  @if $i <= $n {
    &.#{$chart-value}-#{$i},
    &[data-value="#{$i}"],
    &[value="#{$i}"] {
      &.#{$chart-value} {
        &:before {
          content: "#{$i}%";
        }
        &.#{$chart-value-colored}:before {
          color: mix($chart-color, $chart-background, $i * 1%);
        }
      }
      > *:first-child:before {
        @if $i > 0 {
          transform: rotate(($i/100)*360 + "deg");
        }
        @if $i > 50 {
          transform: rotate((($i - 50)/100)*360 + "deg");
          background: currentColor;
        }
      }
    }
    @include chart-value($n, ($i + 1));
  }
}

@mixin chart-control-value($n, $i: 0) {
  @if $i <= $n {
    &[value="#{$i}"] ~ .chart {
      &.#{$chart-value} {
        &:before {
          content: "#{$i}%";
        }
        &.#{$chart-value-colored}:before {
          color: mix($chart-color, $chart-background, $i * 1%);
        }
      }
      > *:first-child:before {
        @if $i > 0 {
          transform: rotate(($i/100)*360 + "deg");
        }
        @if $i > 50 {
          transform: rotate((($i - 50)/100)*360 + "deg");
          background: currentColor;
        }
      }
    }
    @include chart-control-value($n, ($i + 1));
  }
}

.#{$chart} {
  display: inline-block;
  position: relative;
  background: inherit;
  vertical-align: middle;
  @include chart-value(100);
  &.#{$chart-ring} {
    &:after {
      content: "";
      background: inherit;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      border-radius: 50%;
    }
  }
  &.#{$chart-value} {
    &:before {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      text-align: center;
      z-index: 1;
      content: "0%";
    }
  }
  > *:first-child {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: linear-gradient(to right, transparent 50%, currentColor 0);
    &:before {
      content: '';
      display: block;
      margin-left: 50%;
      height: 100%;
      border-radius: 0 100% 100% 0 / 50%;
      background-color: inherit;
      transform-origin: left;
      background-color: inherit;
    }
  }
}

input.#{$chart-control} {
  @include chart-control-value(100);
}