@import 'helpers/helpers';

/// Prints out text-color and background-color classes for every `$colors` in Nebula's configuration.
/// You probably only need to use this once, and *If `$use-colors` is true, the result of this mixin is included in the default nebula.css output*.
/// @group colors
/// @require $colors
/// @output
/// ```scss
/// // For every $color, e.g. red:
/// .n-color-red { color: #B5200F; }
/// .n-background-red { background-color: #B5200F; }
/// ```
@mixin color-rules() {
  @each $name, $value in $colors {
    .#{$class-prefix}-color-#{$name} {
      color: $value;
    }

    .#{$class-prefix}-background-#{$name} {
      background-color: $value;
    }
  }
}

@if ($use-colors) {
  @include color-rules();
}

@import 'helpers/helpers';

/// Prints out text-color and background-color classes for every `$colors` in Nebula's configuration.
/// You probably only need to use this once, and *If `$use-colors` is true, the result of this mixin is included in the default nebula.css output*.
/// @group colors
/// @require $colors
/// @output
/// ```scss
/// // For every $color, e.g. red:
/// .n-color-red { color: #B5200F; }
/// .n-background-red { background-color: #B5200F; }
/// ```
@mixin color-rules() {
  @each $name, $value in $colors {
    @if (type_of($value) == 'color') {
      .#{$class-prefix}-color-#{$name} {
        color: $value;
      }

      .#{$class-prefix}-background-#{$name} {
        background-color: $value;
      }
    } @else if (type_of($value) == 'list'){
      .#{$class-prefix}-color-#{$name} {
        color: nth($value, 1);
      }

      .#{$class-prefix}-background-#{$name} {
        background-image: nth($value, 2);
      }
    }
  }
}

@if ($use-colors) {
  @include color-rules();
}

Support for other color types besides plain colors, like background images and gradients
Support for other color types besides plain colors, like background images and gradients
