@mixin carousels-carousel-background-mapping {
  .carousel.bg {
    &-brand--blue,
    &-brand--dark-blue,
    &-brand--turquoise,
    &-brand--red {
      .slick-dots button::before {
        border-color: $color-alpha--four-50;
      }

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

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