.carousel-pagination {
  display: flex;
  justify-content: center;

  &__dot {
    display: inline-block;
    padding: 0;
    cursor: pointer;
    width: var(--wds-carousel-dots-width, var(--wds-space-200, 12px));
    height: var(--wds-carousel-dots-height, 4px);
    background-color: var(
      --wds-carousel-dots-fill,
      var(--wds-color-blue-300, var(--wsr-color-B30, #a8caff))
    );
    border-radius: var(--wds-carousel-dots-border-radius, 2px);
    margin: 0 var(--wds-space-50, 3px);
  }

  @media (hover: hover) {
    &__dot:hover {
      background-color: var(
        --wds-carousel-dots-fill-hover,
        var(--wds-color-blue-200, var(--wsr-color-B20, #5999ff))
      );
    }
  }

  &__dot#{&}__dot--active {
    background-color: var(
      --wds-carousel-dots-fill-active,
      var(--wds-color-blue-0, var(--wsr-color-B00, #084ebd))
    );
  }
}