@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 {
  @include bg-color(get-color("dark"));
}

// .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));
//     }
//   }
// }

.c, .btn, .head, .text {
  @each $name,
  $color in list-colors() {
    &-#{$name} {
      @include accent-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)};
}