@use "sass:list";
@use "sass:map";
@use "../../colors";
@use "settings";
@use "utils";

@mixin colors {
  @if map.get(settings.$utilities, "colors") {
    $enable-css-vars: map.get(settings.$utilities, "css-vars");
    $color-property-name: map.get(settings.$properties, "color");
    $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};

    // Loop through color families
    @each $family, $colors in colors.$colors {
      @if list.index(map.get(settings.$palette, "color-families"), $family) {
        $css-var-family-name: #{$css-var-color-prefix}-#{$family};
        $class-family-name: #{$color-property-name}-#{$family};

        // Loop through colors
        @each $shade, $color-value in $colors {
          // Main color
          @if $shade == "main" and map.get(settings.$palette, "enable-main-color") {
            @if $enable-css-vars {
              $color-value: var(#{$css-var-family-name});
            } @else {
              $color-value: utils.display-color($color-value);
            }
            .#{settings.$css-class-prefix}#{$class-family-name} {
              color: $color-value;
            }
          }

          // Shades
          @else if
            list.index(map.get(settings.$palette, "shades"), $shade) and
            map.get(settings.$palette, "enable-shades")
          {
            @if $enable-css-vars {
              $color-value: var(#{$css-var-family-name}-#{$shade});
            } @else {
              $color-value: utils.display-color($color-value);
            }
            .#{settings.$css-class-prefix}#{$class-family-name}-#{$shade} {
              color: $color-value;
            }
          }
        }
      }
    }
  }
}