// stylelint-disable declaration-no-important

// Generate foreground colours for use with text with the same background colour name.
@mixin fg-variant($parent, $color) {
  #{$parent} {
    color: $color !important;
  }
  a#{$parent},
  button#{$parent} {
    @include hover-focus() {
      color: lighten($color, 10%) !important;
    }
  }
}

@each $color, $value in $fg-theme-colors {
  @include fg-variant(".fg-#{$color}", $value);
}
