@import "../vars";

$-colors-schema: (
  "white":                    $white,
  "black":                    $black,
  "black-lighter":            $black-lighter,
  "black-lightest":           $black-lightest,
  "gray-darkest":             $gray-darkest,
  "gray-darker":              $gray-darker,
  "gray":                     $gray,
  "gray-lighter":             $gray-lighter,
  "gray-lightest":            $gray-lightest,
  "red":                      $red,
  "orange":                   $orange,
  "yellow":                   $yellow,
  "green":                    $green,
  "teal-blue":                $teal-blue,
  "blue":                     $blue,
  "purple":                   $purple,
  "pink":                     $pink,
) !default;

//
// Text and background colors
// @class .is-red-text
// @class .is-red-bg
//
@each $name, $color in $-colors-schema {
  .has-#{$name}-text {
    color: $color !important;
  }

  .has-#{$name}-bg {
    background: $color !important;
  }
}

.has-none-text {
  color: transparent !important;
}

.has-none-bg {
  background: transparent !important;
}