// Creating light and dark variations for all colors
@each $name, $value in $colors {
  @for $i from -5 through 4 {
    @if $i < 0 {
      .#{$name}.dark-#{abs($i)} {
        background-color: darken($value, abs($i) * 8%);
        color: textColor(darken($value, abs($i) * 8%));
      }
      .text-#{$name}.text-dark-#{abs($i)} {
        color: darken($value, abs($i) * 8%) !important;
      }
      .bd-#{$name}.bd-dark-#{abs($i)} {
        border-color: darken($value, abs($i) * 8%) !important;
      }
    }

    @if $i == 0 {
      .#{$name} {
        background-color: #{$value};
        color: textColor($value);
      }
      .text-#{$name} {
        color: #{$value} !important;
      }
      .bd-#{$name} {
        border-color: #{$value} !important;
      }
    }

    @if $i > 0 {
      .#{$name}.light-#{$i} {
        background-color: lighten($value, $i * 8%);
        color: textColor(lighten($value, $i * 8%));
      }
      .text-#{$name}.text-light-#{$i} {
        color: lighten($value, $i * 8%) !important;
      }
      .bd-#{$name}.bd-light-#{$i} {
        border-color: lighten($value, $i * 8%) !important;
      }
    }
  }
}

@each $name, $value in $axentix-palette {
  .#{$name} {
    background-color: var(getCssVar($name));
    color: var(getCssVar('text-#{$name}'));
  }
  .text-#{$name} {
    color: var(getCssVar($name)) !important;
  }
  .bd-#{$name} {
    border-color: var(getCssVar($name)) !important;
  }
}