.carousel-pagination {
  &__dot {
    width: var(--wds-carousel-dots-width, var(--wds-space-150));
    height: var(--wds-carousel-dots-height, 6px);
    background-color: var(--wds-carousel-dots-fill, var(--wds-color-black-600));
    border-radius: var(--wds-carousel-dots-border-radius, 10000px);
  }

  @media (hover: hover) {
    &__dot:hover {
      background-color: var(
        --wds-carousel-dots-fill-hover,
        var(--wds-color-black-500)
      );
    }
  }

  &__dot#{&}__dot--active {
    background-color: var(
      --wds-carousel-dots-fill-active,
      var(--wds-color-black-100)
    );
  }
}