/* hover bg class start */
@each $color, $shades in $colors {
  @each $shade, $value in $shades {
    .bg-#{$color}-#{$shade} {
      background-color: var(--#{$color}-#{$shade}) !important;
    }
  }
}

// hover background
@each $color, $shades in $colors {
  @each $shade, $value in $shades {
    .hover-bg-#{$color}-#{$shade} {
      &:hover {
          background-color: var(--#{$color}-#{$shade}) !important;
      }
    }
  }
}

.hover-bg-white {
  &:hover {
    background-color: hsl(var(--white)) !important;
  }
}

.bg-white {
  &-08 {
    background-color: hsl(var(--white)/.08);
  }
  &-13 {
    background-color: hsl(var(--white)/.13);
  }
  &-7 {
    background-color: hsl(var(--white)/.7);
  }
  &-06 {
    background-color: hsl(var(--white)/.06);
  }
}



/* hover bg class end */