// Solid `black` and `white` colors are defined in `_colors.scss`.


@for $i from 1 through 19 {
  $num: $i * 5;
  $color: darken(white, $num);

  .black-#{$num} { color: $color; }
  .bg-black-#{$num} { background-color: $color; }

  @each $breakpoint in $breakpoints {
    $bp: nth($breakpoint, 1);
    $letters: nth($breakpoint, 2);

    @media #{$bp} {
      .black-#{$num}-#{$letters} { color: $color; }
      .bg-black-#{$num}-#{$letters} { background-color: $color; }
    }
  }
}

@for $i from 1 through 19 {
  $num: $i * 5;
  $color: lighten(black, $num);

  .white-#{$num} { color: $color; }
  .bg-white-#{$num} { background-color: $color; }

  @each $breakpoint in $breakpoints {
    $bp: nth($breakpoint, 1);
    $letters: nth($breakpoint, 2);

    @media #{$bp} {
      .white-#{$num}-#{$letters} { color: $color; }
      .bg-white-#{$num}-#{$letters} { background-color: $color; }
    }
  }
}