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

.c {

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


@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 {
    color:currentColor;
    outline-color: currentColor;
  }
}

.bg-accent {
  background-color: var(--accent-color);
}

.bg-dark {
  background-color: get-color("dark");
}

.bg {
  background-color: $color-background;
}

.bg-alt {
  background-color: $color-background-alt;
}

.bg-soft {
  background-color: var(--accent-color-soft);
}

// .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 {
  --text-color:#{$color-font-light};
  --link-color-hover:#{transparentize($color-font-light, 0.7)};
}

.fg-dark {
  color: $color-font;
  --text-color:#{$color-font};
  --link-color-hover:#{transparentize($color-font, 0.85)};
}