@import "../../globals/scss/prefix";
@import "../../globals/scss/color";
@import "../../globals/scss/color-dark";
@import "../../globals/scss/util";

//Dark mode reactive colors
@each $color in map-keys($colors) {
  @include bg-variant(".bg-#{$color}", css-var(color-base, $color));
}

// theme colors
@each $color in map-keys($theme-colors) {
  @include bg-variant(".bg-#{$color}", css-var(color-base, $color));
}

@each $gray in map-keys($grays) {
  @include bg-variant(".bg-gray-#{$gray}", css-var(color-base-gray, $gray));
}

//Dark mode non reactive colors
@each $color, $value in $grays {
  @include bg-variant(".bg-gray-light-#{$color}", $value);
}

@each $color, $value in $grays-dark {
  @include bg-variant(".bg-gray-dark-#{$color}", $value);
}

// Background gradient Classes
@each $gradient, $value in $gradients {
  @include bg-gradient(".bg-gradient-#{$gradient}", $value);
}

.bg-transparent {   /* stylelint-disable-next-line declaration-no-important */
  background-color: transparent !important;
}