@import '../00_settings/background-variants-color-map';
// Creates the .bg-variant-#{$variant} classes with the right background-color property from the background-variants-color-map
// Use only once to set up the utilities
// e.g.
//
// @include bg-variant-classes();
@mixin bg-variant-classes($backgroundmap: $backgrounds) {
  @each $variant, $value in $backgroundmap {
    $backgroundColor: map-get($value, 'background');
    $defaultTextColor: map-get($value, 'bodyPrimary');

    .bg-variant-#{$variant} {
      background-color: returnColorCSSVar($backgroundColor);
      color: returnColorCSSVar($defaultTextColor);
    }
  }
}

// Iterates over all backgrounds mapped in background-variants-color-map and outputs whatever is wrapped inside it with a .bg-variant-#{$variant} class selector before it
// .bg-variant-#{$variant} &
// Use together with varient-property function
// Pass the $supportedBackgrounds as a list, if you only want to create classes for certain backgrounds
// Set the $isChained to true, if you need to have a class that is chained to the parent e.g. .block.bg-variant-brand-primary
// e.g.
//
// .divider {
//   @include bg-variants(
//     $supportedBackgrounds: (
//       'brand-primary',
//       'brand-senary'
//     )
//   ) {
//     color: variant-property('divider');
//   }
// }
//
// .divider {
//   @include bg-variants() {
//     border-color: variant-property('divider');
//   }
// }
@mixin bg-variants(
  $backgroundmap: $backgrounds,
  $supportedBackgrounds: null,
  $isChained: false
) {
  @if ($supportedBackgrounds != null) {
    @each $variant in $supportedBackgrounds {
      $className: if(
        $isChained==true,
        '.bg-variant-#{$variant}#{&}',
        '.bg-variant-#{$variant} &'
      );

      @at-root #{$className} {
        $variant-map: () !global;

        $supportedMap: if(
          map-has-key($backgroundmap, $variant),
          map-get($backgroundmap, $variant),
          null
        );

        @each $key, $value in $supportedMap {
          $variant-map: map-merge(
            $variant-map,
            (
              $key: returnColorCSSVar($value)
            )
          ) !global;
        }

        @content;
        $variant-map: null !global;
      }
    }
  } @else {
    @each $variant, $map in $backgroundmap {
      $className: if(
        $isChained==true,
        '.bg-variant-#{$variant}#{&}',
        '.bg-variant-#{$variant} &'
      );

      @at-root #{$className} {
        // Makes a global map that can be accessed by the variant-property function
        $variant-map: () !global;

        @each $key, $submap in $map {
          $value: map-get(map-get($backgroundmap, $variant), '#{$key}');
          $variant-map: map-merge(
            $variant-map,
            (
              $key: returnColorCSSVar($value)
            )
          ) !global;
        }

        @content;
        $variant-map: null !global;
      }
    }
  }
}

// function to use inside the wrapped content and access the
// Use together with bg-varients mixin
// e.g.
//
// .divider {
//   @include bg-variants() {
//     border-color: variant-property('divider');
//   }
// }
@function variant-property($key) {
  $value: map-get($variant-map, $key);

  @if ($value != null) {
    @return map-get($variant-map, $key);
  } @else {
    @return null;
  }
}