.has-dots {
  @if ($carousel-dots-margin > 0) {
    margin-bottom: calc(#{$carousel-dots-margin} + #{$carousel-dots-height});
  }
}

.carousel__dots {
  margin: 0 auto;
  padding: 0;

  @if ($carousel-dots-absolute) {
    position: absolute;
    top: calc(100% + #{$carousel-dots-margin});
    left: 0;
    right: 0;
  }

  display: flex;
  justify-content: center;

  list-style: none;
  user-select: none;

  .carousel__dot {
    margin: 0;
    padding: 0;

    display: block;
    position: relative;

    width: $carousel-dots-width;
    height: $carousel-dots-height;

    cursor: pointer;

    &:after {
      content: "";
      width: $carousel-dots-dot-width;
      height: $carousel-dots-dot-height;
      border-radius: $carousel-dots-dot-radius;

      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      background-color: $carousel-dots-dot-color;

      @if ($carousel-dots-dot-opacity < 1) {
        opacity: $carousel-dots-dot-opacity;
        transition: opacity 0.15s ease-in-out;
      }
    }

    @if ($carousel-dots-dot-opacity < 1) {
      &.is-selected:after {
        opacity: 1;
      }
    }
  }
}