@mixin carousels-carousel-background-mapping {
  .carousel.bg {
    &-brand--gradient-blue,
    &-brand--gradient-orange,
    &-brand--dark-grey {
      .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;
      }
    }
  }
}