// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

// Sass modifiers mixin by Sarah Dayan
// http://frontstuff.io
// https://github.com/sarahdayan

// Dependency: map-depth by Hugo Giraudel https://hugogiraudel.com
@function map-depth($map) {
  $level: 1;

  @each $key, $value in $map {
    @if type-of($value) == "map" {
      $level: max(map-depth($value) + 1, $level);
    }
  }

  @return $level;
}

$colors: (
  grey: (
    base: #404145,
    light: #c7c7cd
  ),
  yellow: (
    base: #ecaf2d
  ),
  green: (
    base: #5ad864
  )
);

$font-sizes: (
  base: 14px,
  s: 12px,
  l: 16px,
  xl: 18px,
  xxl: 20px
);

@mixin modifiers($map, $attribute, $prefix: '-', $separator: '-', $base: 'base') {
  @each $key, $value in $map {
    &#{if($key != $base, #{$prefix}#{$key}, '')} {
      @if map-depth($map) > 1 {
        @include modifiers($value, $attribute, $separator);
      }
      @else {
        #{$attribute}: $value;
      }
    }
  }
}

.text {
  @include modifiers($colors, 'color', $separator: ':');
  @include modifiers($font-sizes, 'font-size', '--');
}