$dot-width: var(--wds-carousel-dots-width, var(--wds-space-150)) !default;
$dot-fill: var(--wds-carousel-dots-fill, var(--wds-color-blue-300)) !default;
$dot-fill-hover: var(
  --wds-carousel-dots-fill-hover,
  var(--wds-color-blue-200)
) !default;
$dot-fill-active: var(
  --wds-carousel-dots-fill-active,
  var(--wds-color-blue-0)
) !default;

.carousel-pagination {
  &__dot {
    width: #{$dot-width};
    height: var(--wds-carousel-dots-height, 6px);
    background-color: #{$dot-fill};
    border-radius: var(--wds-carousel-dots-border-radius, 10000px);
  }

  @media (hover: hover) {
    &__dot:hover {
      background-color: #{$dot-fill-hover};
    }
  }

  &__dot#{&}__dot--active {
    background-color: #{$dot-fill-active};
  }
}