percentile color functions

// set up the color stops - mess with these to change the gradient
$color-stop-1: hsl(107, 41.0526%, 62.7451%);
$color-stop-2: hsl(177, 42.9752%, 52.5490%);
$color-stop-3: hsl(263, 30.0000%, 60.7843%);
$color-stop-4: hsl(360, 74.8792%, 59.4118%);

// set up percentile ranges 
$top-tier: sequence(67, 99);
$mid-tier: sequence(34, 66);
$bottom-tier: sequence(1, 33);

// mixin to mix the colors and assign them to a class
@mixin tileStyle($color1, $color2, $range) {
  @for $i from first($range) through last($range) {
    $value: index($range, $i) / length($range) * 100;
    $shade: darken(mix($color1, $color2, $value), 15%);
  
    .percentile-#{$i} {
      background: mix($color1, $color2, $value);
      .number {
        text-shadow: .080em .080em $shade;
      }
    }
  }
}

// call the mixin for each percentile grouping
.table {
  @include tileStyle($color-stop-1, $color-stop-2, $top-tier);
  @include tileStyle($color-stop-2, $color-stop-3, $mid-tier);
  @include tileStyle($color-stop-3, $color-stop-4, $bottom-tier);
}