// >>-- 24 Background css start --<<

// background-color css starts

@mixin bg-colors($name, $stylename,$color,$max, $offset) {
    $i: .30;
    @while $i <= $max {
      .bg-#{$name}-#{$i*1000} {
        #{$stylename}: rgba(#{$color},#{$i}) !important;
        color: rgba(var(--white),1);
        &:hover,&:active ,&.active ,&.show,&:checked,&:focus {
            color: rgba(var(--white),1);
            transition: var(--app-transition);
          }
      }

      $i: $i + $offset;
    }
  }


  @each $name, $color in $colors {
    @include bg-colors("#{$name}", 'background-color',map-get($colors, $name),.90,.10);
  }


  .bg-outline-warning,
  .bg-warning{
    color: rgba(var(--dark),1) !important;
  }
  // >>-- 24 Background css end --<<