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

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

@each $property, $value in $extra-colors {
  .bg-#{$property} {
    background-color: var(--#{$property}) !important;
  }
}

@each $color, $shades in $colors {
  @each $shade, $value in $shades {
    .bg-hover-#{$color}-#{$shade} {
      @include transition(all 0.3s);

      &:hover {
        background-color: var(--#{$color}-#{$shade}) !important;
      }
    }
  }
}

@each $color, $shades in $semantic-colors {
  @each $shade, $value in $shades {
    .bg-hover-#{$color}-#{$shade} {
      @include transition(all 0.3s);

      &:hover {
        background-color: var(--#{$color}-#{$shade}) !important;
      }
    }
  }
}

@each $property, $value in $extra-colors {
  .bg-hover-#{$property} {
    @include transition(all 0.3s);

    &:hover {
      background-color: var(--#{$property}) !important;
    }
  }
}

.bg-base {
  background-color: var(--white) !important;
}

.bg-base-50 {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.hover-bg-transparent {
  background-color: transparent !important;
}

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


@each $property, $value in $bg-light-colors {
  .bg-#{$property} {
    background-color: var(--#{$property}) !important;
  }
}

.bg-gradient-start-1 {
  background: linear-gradient(to right, #E6F9FF, #FEFFFF);
}

.bg-gradient-start-2 {
  background: linear-gradient(to right, #F7E9FF, #FFFEFD);
}

.bg-gradient-start-3 {
  background: linear-gradient(to right, #E6EBFF, #FFFFFF);
}

.bg-gradient-start-4 {
  background: linear-gradient(to right, #E8FFF5, #FFFFFF);
}

.bg-gradient-start-5 {
  background: linear-gradient(to right, #FFEEEE, #FFFCFC);
}


.bg-gradient-dark-start-1 {
  background: linear-gradient(261deg, rgba(255, 234, 244, 0.50) 2.07%, #FFE2F0 97.73%);
}

.bg-gradient-dark-start-2 {
  background: linear-gradient(262deg, rgba(236, 221, 255, 0.30) 2.45%, #ECDDFF 97.35%);
}

.bg-gradient-dark-start-3 {
  background: linear-gradient(262deg, #EBFAFF 4.01%, #C0F0FF 99.29%);
}


.bg-gradient-end-1 {
  background: linear-gradient(to right, #FFFFFF, #EFF4FF);
}

.bg-gradient-end-2 {
  background: linear-gradient(to right, #FFFFFF, #EAFFF9);
}

.bg-gradient-end-3 {
  background: linear-gradient(to right, #FFFFFF, #FFF5E9);
}

.bg-gradient-end-4 {
  background: linear-gradient(to right, #FFFFFF, #F3EEFF);
}

.bg-gradient-end-5 {
  background: linear-gradient(to right, #FFFFFF, #FFF2FE);
}

.bg-gradient-end-6 {
  background: linear-gradient(to right, #FFFFFF, #EEFBFF);
}


.bg-gradient-purple {
  background: linear-gradient(300deg, #FFE9E0 1.27%, #EFD3FF 98.89%);
}

.bg-gradient-primary {
  background: linear-gradient(299deg, #D7F6FF 1.03%, #D1DEFF 97.72%);
}

.bg-gradient-success {
  background: linear-gradient(299deg, #ECFFF7 1.76%, #ADF7D6 98.11%);
}

.bg-gradient-danger {
  background: linear-gradient(299deg, #FFEFEF 0.96%, #FFD7D7 98.97%);
}


.bg-primary-gradient {
  background: linear-gradient(299deg, #D7F6FF 1.03%, #D1DEFF 97.72%);
}

.bg-success-gradient {
  background: linear-gradient(270deg, #70E396 0%, #45B369 100%);
}

.bg-info-gradient {
  background: linear-gradient(270deg, #85A7FF 0%, #144BD6 100%);
}

.bg-warning-gradient {
  background: linear-gradient(270deg, #FFD199 0%, #FF9F29 100%);
}

.bg-danger-gradient {
  background: linear-gradient(270deg, #FFAB86 0%, #EF4A00 100%);
}

.bg-primary-success-gradient {
  background: linear-gradient(90deg, #BBCAFF 0%, #DCFFFD 100%);
}


.bg-dark-primary-gradient {
  background: linear-gradient(270deg, #7EA5FF 0%, #003DCC 100%);
}

.bg-dark-lilac-gradient {
  background: linear-gradient(270deg, #BA76FF 0%, #6100C1 100%);
}

.bg-dark-success-gradient {
  background: linear-gradient(270deg, #48DC79 0%, #02862D 100%);
}

.bg-dark-info-gradient {
  background: linear-gradient(270deg, #5384FF 0%, #0036BD 100%);
}

.bg-dark-warning-gradient {
  background: linear-gradient(270deg, #FFC175 0%, #C36C00 100%);
}

.bg-dark-danger-gradient {
  background: linear-gradient(270deg, #FF7739 0%, #C63D00 100%);
}

.bg-dark-dark-gradient {
  background: linear-gradient(90deg, #273142 0%, #637DA8 100%);
}


.bg-danger-gradient-light {
  background: linear-gradient(90deg, #F7E9FF 0.12%, #FDF8F7 99.89%) !important;
}

.bg-white-gradient-light {
  background: linear-gradient(317deg, rgba(225, 225, 225, 0.10) 8.56%, rgba(255, 255, 255, 0.50) 91.49%) !important;
}

.bg-light-pink {
  background: var(--gradients-Colors-gradients-2, linear-gradient(90deg, #F7E9FF 0.12%, #FDF8F7 99.89%));
}

html[data-theme="dark"] {
  .bg-base-50 {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  .bg-gradient-start-1 {
    background: linear-gradient(to right, rgba(#e6f9ff, 0.15), rgba(#feffff, 0.1));
  }

  .bg-gradient-start-2 {
    background: linear-gradient(to right, rgba(#f7e9ff, 0.15), rgba(#fffefd, 0.1));
  }

  .bg-gradient-start-3 {
    background: linear-gradient(to right, rgba(#e6ebff, 0.15), rgba(#fff, 0.1));
  }

  .bg-gradient-start-4 {
    background: linear-gradient(to right, rgba(#e8fff5, 0.15), rgba(#fff, 0.1));
  }

  .bg-gradient-start-5 {
    background: linear-gradient(to right, rgba(#fee, 0.15), rgba(#fffcfc, 0.1));
  }


  .bg-gradient-dark-start-1 {
    background: linear-gradient(261deg, rgba(255, 234, 244, 0.08) 2.07%, rgba(255, 226, 240, 0.15) 97.73%);
  }

  .bg-gradient-dark-start-2 {
    background: linear-gradient(262deg, rgba(236, 221, 255, 0.05) 2.45%, rgba(236, 221, 255, 0.15) 97.35%);
  }

  .bg-gradient-dark-start-3 {
    background: linear-gradient(262deg, rgba(235, 250, 255, 0.15) 4.01%, rgba(192, 240, 255, 0.15) 99.29%);
  }

  .bg-gradient-end-1 {
    background: linear-gradient(to right, rgba(#ffffff, 0.075), rgba(#EFF4FF, 0.125));
  }

  .bg-gradient-end-2 {
    background: linear-gradient(to right, rgba(#ffffff, 0.075), rgba(#EAFFF9, 0.125));
  }

  .bg-gradient-end-3 {
    background: linear-gradient(to right, rgba(#ffffff, 0.075), rgba(#FFF5E9, 0.125));
  }

  .bg-gradient-end-4 {
    background: linear-gradient(to right, rgba(#ffffff, 0.075), rgba(#F3EEFF, 0.125));
  }

  .bg-gradient-end-5 {
    background: linear-gradient(to right, rgba(#ffffff, 0.075), rgba(#FFF2FE, 0.125));
  }

  .bg-gradient-end-6 {
    background: linear-gradient(to right, rgba(#ffffff, 0.075), rgba(#EEFBFF, 0.125));
  }


  .bg-gradient-purple {
    background: linear-gradient(300deg, rgba(#FFE9E0, 0.1) 1.27%, rgba(#EFD3FF, 0.15) 98.89%);
  }

  .bg-gradient-primary {
    background: linear-gradient(299deg, rgba(#D7F6FF, 0.1) 1.03%, rgba(#D1DEFF, 0.15) 97.72%);
  }

  .bg-gradient-success {
    background: linear-gradient(299deg, rgba(#ECFFF7, 0.1) 1.76%, rgba(#ADF7D6, 0.15) 98.11%);
  }

  .bg-gradient-danger {
    background: linear-gradient(299deg, rgba(#FFEFEF, 0.1) 0.96%, rgba(#FFD7D7, 0.15) 98.97%);
  }


  .bg-danger-gradient-light {
    background: linear-gradient(90deg, rgba(#F7E9FF, 0.05) 0.12%, rgba(#FDF8F7, 0.1) 99.89%) !important;
  }

  .bg-white-gradient-light {
    background: linear-gradient(317deg, rgba(225, 225, 225, 0.05) 8.56%, rgba(255, 255, 255, 0.1) 91.49%) !important;
  }

  .bg-light-pink {
    background: var(--gradients-Colors-gradients-2, linear-gradient(90deg, rgba(#F7E9FF, 0.1) 0.12%, rgba(#FDF8F7, 0.05) 99.89%));
  }
}

.bg-gradient-blue-warning {
  background: linear-gradient(90deg, #CBFFF9 0%, #FFEEB1 100%);
}

.aspect-ratio-1 {
  aspect-ratio: 1;
}


.bg-tb-warning {
  background: linear-gradient(180deg, rgba(255, 186, 69, 0.25) 0%, rgba(244, 116, 53, 0.25) 100%);
}

.bg-tb-lilac {
  background: linear-gradient(180deg, rgba(252, 120, 138, 0.25) 0%, rgba(152, 22, 139, 0.25) 100%);
}

.bg-tb-primary {
  background: linear-gradient(180deg, rgba(25, 207, 239, 0.25) 0%, rgba(13, 106, 184, 0.25) 100%);
}

.bg-tb-success {
  background: linear-gradient(180deg, rgba(134, 221, 102, 0.25) 0%, rgba(2, 140, 75, 0.25) 100%);
}

.gradient-deep {
  &-1 {
    background: linear-gradient(270deg, #EEF7FF 0%, #DFF0FF 100%);
  }

  &-2 {
    background: linear-gradient(270deg, #F7F2FF 0%, #EEE5FF 100%);
  }

  &-3 {
    background: linear-gradient(270deg, #E8FFF9 0%, #D1FFF3 100%);
  }

  &-4 {
    background: linear-gradient(270deg, #FFF4E8 0%, #FFEEDC 100%);
  }
}

.gradient-deep-two {
  &-1 {
    background: linear-gradient(270deg, #D4F7FF 0%, #F2FDFF 100%);
  }

  &-2 {
    background: linear-gradient(270deg, #FFEFDD 0%, #FFF8EF 100%);
  }

  &-3 {
    background: linear-gradient(270deg, #E9E0FF 0%, #F6F2FF 100%);
  }

  &-4 {
    background: linear-gradient(270deg, #DEFFEC 0%, #F6FFFA 100%);
  }
}

html[data-theme="dark"] {

  @for $i from 1 through 4 {
    .gradient-deep-#{$i} {
      background: var(--neutral-50);
    }
  }

  @for $i from 1 through 4 {
    .gradient-deep-two-#{$i} {
      background: var(--neutral-100);
      border-color: var(--border-color) !important;
    }
  }


  .dark-bg-neutral-200 {
    background-color: var(--neutral-200) !important;
  }
}

.bg-blue-light {
  background-color: #A8C9F4;
}

.bg-green-light {
  background-color: #A4E7BC;
}

.bg-red-light {
  background-color: #FFBAAA;
}

.bg-warning-light {
  background-color: #FFDD96;
}

html[data-theme="dark"] {
  .bg-blue-light {
    background-color: #0134ad66;
  }

  .bg-green-light {
    background-color: #26a17c66;
  }

  .bg-red-light {
    background-color: #fc563166;
  }

  .bg-warning-light {
    background-color: #ff880066;
  }
}

.bg-blue-light-two {
  background-color: #E8EDFB;
}

.bg-green-light-two {
  background-color: #E3F4E9;
}

.bg-red-light-two {
  background-color: #FDE4EA;
}

.bg-warning-light-two {
  background-color: #FFF2D5;
}

html[data-theme="dark"] {
  .bg-blue-light-two {
    background-color: #0134ad26;
  }

  .bg-green-light-two {
    background-color: #26a17c26;
  }

  .bg-red-light-two {
    background-color: #fc563126;
  }

  .bg-warning-light-two {
    background-color: #ff880026;
  }
}


/* Stroke Class */
.stroke {
  &-blue {
    stroke: #487FFF !important;
  }

  &-red {
    stroke: #EF4A00 !important;
  }

  &-warning {
    stroke: #FF9F29 !important;
  }

  &-green {
    stroke: #45B369 !important;
  }
}

/* Stroke Class */


.bg-gradient-custom {
  &-1 {
    background: linear-gradient(246deg, #B159FF 5.05%, #8B08FE 96.12%);
  }

  &-2 {
    background: linear-gradient(245deg, #7397FD 4.86%, #5077E5 96.35%);
  }

  &-3 {
    background: linear-gradient(245deg, #2FD8E4 3.97%, #04B4C0 96.86%);
  }

  &-4 {
    background: linear-gradient(250deg, #FFB359 3.29%, #FB9B29 96.24%);
  }
}

.gradient-bg-chart {
  &::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 106px;
    background: linear-gradient(90deg, rgba(156, 43, 255, 0.15) 0%, rgba(6, 207, 221, 0.15) 36.35%, rgba(91, 134, 255, 0.15) 70.54%, rgba(253, 164, 58, 0.15) 100%);
    filter: blur(25px);
    inset-block-end: 0;
    z-index: -1;
  }
}



.gradient-bg-light {
  &-one {
    background: linear-gradient(0deg, #EEF3FF 0%, #FDFDFF 100%);
  }

  &-two {
    background: linear-gradient(0deg, #E7F5FF 0%, #FCFEFF 100%);
  }

  &-three {
    background: linear-gradient(0deg, #ECE9FF 0%, #FCFCFF 100%);
  }

  &-four {
    background: linear-gradient(357deg, #FFF5E8 2.78%, #FFFCF9 97.3%);
  }

  &-five {
    background: linear-gradient(0deg, #FFF6D3 0%, #FFFFF4 100%);
  }

  &-six {
    background: linear-gradient(0deg, #EBFFD8 0%, #FFF 100%);
  }
}

[data-theme=dark] {

  .gradient-bg-light-one,
  .gradient-bg-light-two,
  .gradient-bg-light-three,
  .gradient-bg-light-four,
  .gradient-bg-light-five,
  .gradient-bg-light-six {
    background: linear-gradient(0deg, rgba(231, 245, 255, 0.10) 0%, rgba(252, 254, 255, 0.10) 100%);
  }

  .br-white {
    border-color: #606266 !important;
  }
}

.sass-card-gradient-bg {
  &-1 {
    background: linear-gradient(299deg, #ffffff00 53.55%, #0055ff14 93.27%);
  }

  &-2 {
    background: linear-gradient(299deg, #ffffff00 56.67%, #f4941e26 92.87%);
  }

  &-3 {
    background: linear-gradient(299deg, #ffffff00 56.67%, #8252e92b 92.87%);
  }

  &-4 {
    background: linear-gradient(299deg, #ffffff00 56.67%, rgb(34 197 94 / 14%) 92.87%);
  }
}

.sales-card-gradient-bg {
  &-1 {
    background: linear-gradient(190deg, #FDFDFF 8.24%, #EEF3FF 89.87%);
  }

  &-2 {
    background: linear-gradient(190deg, #FFF 8.24%, #FFF5E8 89.87%);
  }

  &-3 {
    background: linear-gradient(190deg, #FDFDFF 8.24%, #ECE9FF 89.87%);
  }

  &-4 {
    background: linear-gradient(190deg, #FDFDFF 8.24%, #E6FFEF 89.87%);
  }
}

[data-theme=dark] {
  .sales-card-gradient-bg {
    &-1 {
      background: #1b2431;
    }

    &-2 {
      background: #1b2431;
    }

    &-3 {
      background: #1b2431;
    }

    &-4 {
      background: #1b2431;
    }
  }
}

.bg-purple-30 {
  background-color: #ddcdff;
}

.bg-brand-color {
  background-color: #2563eb;
}

.text-brand-color {
  color: #2563eb;
}