@use "sass:map";
@use "sass:meta";

@mixin _nested-map-to-css-vars($map, $parent) {
  @each $prop, $value in $map {
    @if meta.type-of($value) == 'map' {
      @include _nested-map-to-css-vars($value, "#{ $parent }--#{ $prop }");
    }
    @else {
      --#{$parent}--#{$prop}: #{ $value };
    }
  }
}

@mixin map-to-css-vars($map, $key: '') {
  // If a $key is provided, create a "mini-map" using the $key as the map name
  // and nest the values inside that. This will create a new map that can be
  // looped through. Otherwise, just use the $map.
  $map: if(map.get($map, $key), ($key: (map.get($map, $key))), $map);

  @each $prop, $value in $map {
    @if meta.type-of($value) == 'map' {
      @include _nested-map-to-css-vars($value, $prop);
    }
    @else {
      --#{ $prop }: #{ $value };
    }
  }
}
