/* 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;
      }
    }
  }
}

.bg-crm {
  background-color: #072032 !important;
}

.bg-hover-crm:hover {
  background-color: #072032 !important;
}

.bg-app-landing {
  background-color: hsl(var(--app-landing));
}

.bg-hover-app-landing {
  &:hover {
    background-color: hsl(var(--app-landing)) !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);
  }
  &-01 {
    background-color: #ffffff0a;
  }
}

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

.bg {
  &-black {
    background-color: #1c1c1c;
  }
  &-green {
    background-color: #00b67a;
  }
  &-pink {
    background-color: #fd1774;
  }
  &-pink-dark {
    background-color: #f5f5f8;
  }
  &-pink-light {
    background-color: #f97289;
  }
  &-pink-lighter {
    background-color: #f9728924;
  }
  &-sky {
    background-color: #41a5fa;
  }
  &-sky-deep {
    background-color: #1b89aa;
  }
  &-dark-deep {
    background-color: #31336b;
  }
  &-purple-light {
    background-color: #f5f5f8;
  }
  &-paste {
    background-color: #3af062;
  }
  &-paste-light {
    background-color: #3af0622b;
  }
  &-yellow {
    background-color: hsl(var(--yellow));
  }
  &-purple {
    background-color: hsl(var(--purple));
  }
  &-spring-green {
    background-color: hsl(var(--spring-green));
  }
  &-goldenrod {
    background-color: #D19D3D17;
  }
  &-orange {
    background-color: hsl(var(--orange));
  }
  &-deep-green {
    background-color: #0A8A22;
  }
}

.section-bg {
  &-one {
    background-color: #f5f5f8;
  }
  &-two {
    background-color: #F3F8F8;
  }
  &-three {
    background-color: #F0F0FC;
  }
}

.bg-pink-more-light {
  background-color: #FBF6EE;
  &-half {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      inset-block-end: 0;
      width: 100%;
      height: 40%;
      background-color: #FBF6EE;
      z-index: -1;
    }
  }
}

.bg-neutral-light {
  background-color: #EFF1F4;
  &-half {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      inset-block-end: 0;
      width: 100%;
      height: 40%;
      background-color: #EFF1F4;
      z-index: -1;
    }
    &.style-two {
      &::before {
        background-color: #f3f8f8;
        inset-block-end: auto;
        inset-block-start: 0;
        height: 60%;
      }
    }
  }
}
/* hover bg class end */