// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in map-merge-multiple($theme-colors-palettes, $theme-colors, $palette-grays, ("gray": map-get($colors, "gray"))) {
  @if ($color == "secondary") {
    .text-bg-secondary {
      color: var(--#{$prefix}secondary-700);
      background: var(--#{$prefix}secondary-50);
    }
  } @else {
    .text-bg-#{$color} {
      color: color-contrast-var($value) if($enable-important-utilities, !important, null);
      background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
    }
  }

}

@each $color, $value in $theme-colors {
  .text-#{$color}-bg-color {
    color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);

    @if $color == "light" {
      background-color: RGBA(var(--#{$prefix}gray-700-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
    } @else if $color == "dark" {
      background-color: RGBA(var(--#{$prefix}gray-200-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
    } @else {
      background-color: RGBA(var(--#{$prefix}#{$color}-100-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
    }
  }
}