@mixin carousels-carousel-background-mapping {
  .slick-dots button::before {
    @include bg-variants() {
      border-color: variant-property('sliderDotsIdle');
    }
  }

  .slick-dots button:hover::before {
    @include bg-variants() {
      border-color: variant-property('sliderDotsActive');
    }
  }

  .slick-dots .slick-active button::before {
    @include bg-variants() {
      background: variant-property('sliderDotsActive');
    }
  }

  // ! Deprecation warning, do not use anymore. Will be removed in a later release use bg-variants function instead.

  .carousel.bg {
    &-brand--blue,
    &-brand--dark-blue {
      .slick-dots button::before {
        border-color: $color-alpha--four-50;
      }

      .slick-dots button:hover::before {
        border-color: $color-brand--white;
      }

      .slick-dots .slick-active button::before {
        background: $color-brand--white;
      }
    }
  }
}