/* 1.2 - Colorization classes
 * Colorize some aspect of a class
**/

@mixin heading-color($background-color) {

  & .card-header,
  & .menu-header,
  &.header-bg th {
    @include colorize-shape($background-color);
    color: getTextColorFromBackground($background-color);
  }

  th {
    color: $background-color;
  }
}

@mixin bg-color($background-color) {
  @include background-color($background-color);

  &>a,
  &>a:visited {
    color: $background-color;
    background-color: getTextColorFromBackground($background-color);

    &:hover,
    &:active,
    &:visited {
      color: getTextColorFromBackground($background-color);
      background: none;
    }
  }
}

.bg {

  @each $name,
  $color in list-colors() {
    &-#{$name} {
      @include bg-color(get-color($name));
      &:hover {
        @include bg-color(get-color($name));
      }
    }
  }
}

.text {

  @each $name,
  $color in list-colors() {
    &-#{$name} {
      @include text-color(get-color($name));
    }
  }
}

.btn {

  @each $name,
  $color in list-colors() {
    &-#{$name} {
      @include button-color(get-color($name));
    }
  }
}

.head {

  @each $name,
  $color in list-colors() {
    &-#{$name} {
      @include heading-color(get-color($name));
    }
  }
}

.fg-light {
  color: $color-font-light;
}

.fg-dark {
  color: $color-font;
}