@use "sass:color";
@use "../roots/color-map" as *;

@each $color, $value in $color-map {
  .text-#{$color} {
    color: $value;
  }
  .text-#{$color}i {
    color: $value !important;
  }
  .text-hov-#{$color}:hover {
    color: $value;
  }

  // Basic text shadow using color
  .text-shad-#{$color},
  .text-shadow-#{$color} {
    text-shadow: 2px 2px 4px $value;
  }

  // Shadow on hover
  .text-shad-hov-#{$color}:hover,
  .text-shadow-hov-#{$color}:hover {
    text-shadow: 2px 2px 4px $value;
  }
}

@mixin color-variations($color, $color-name) {
  @for $i from 1 through 9 {
    // Generate variations based on darkening or lightening
    $adjusted-color: color.adjust($color, $lightness: (100 - $i * 10) * 5%);

    // Generate the class for each variation
    .#{$color-name}-#{$i * 100} {
      color: $adjusted-color;
    }
  }
}

// Iterate through the color map and apply the mixin for each color
@each $name, $color in $color-map {
  @include color-variations($color, $name);
}