@use '../style/base' as *;

@include bem(swiper-dot) {
  @include b() {
    @include universal;
    position: absolute;
    pointer-events: none;
  }

  @include e(item) {
    @include universal;
  }

  @include m(dot, dot-bar, index) {
    left: 0;
    right: 0;
    bottom: var(--sar-swiper-dot-bottom);
    flex-direction: row;
    justify-content: center;
    gap: var(--sar-swiper-dot-gap);

    @include e(item) {
      width: var(--sar-swiper-dot-size);
      height: var(--sar-swiper-dot-size);
      justify-content: center;
      align-items: center;
      border-radius: var(--sar-rounded-full);
      font-size: var(--sar-swiper-dot-font-size);
      line-height: 1;
      color: var(--sar-swiper-dot-color);
      background: var(--sar-swiper-dot-bg);

      @include m(active) {
        background: var(--sar-swiper-dot-active-bg);
      }
    }
  }

  @include m(dot-bar) {
    @include e(item) {
      transition: width var(--sar-swiper-dot-bar-duration);
      @include m(active) {
        width: var(--sar-swiper-dot-bar-active-size);
      }
    }
  }

  @include m(index) {
    @include e(item) {
      width: var(--sar-swiper-dot-index-size);
      height: var(--sar-swiper-dot-index-size);
      color: var(--sar-swiper-dot-index-color);
      background: var(--sar-swiper-dot-index-bg);
      @include m(active) {
        background: var(--sar-swiper-dot-index-active-bg);
      }
    }
  }

  @include m(title) {
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: center;
    padding: var(--sar-swiper-dot-title-padding);
    font-size: var(--sar-swiper-dot-title-font-size);
    line-height: var(--sar-leading-snug);
    color: var(--sar-swiper-dot-title-color);
    background: var(--sar-swiper-dot-title-bg);

    @include e(item) {
      display: block;
      width: 100%;
      @include ellipsis;
    }
  }

  @include m(fraction) {
    right: var(--sar-swiper-dot-fraction-right);
    bottom: var(--sar-swiper-dot-fraction-bottom);
    padding: var(--sar-swiper-dot-fraction-padding);
    border-radius: var(--sar-rounded-full);
    font-size: var(--sar-swiper-dot-fraction-font-size);
    line-height: var(--sar-leading-snug);
    color: var(--sar-swiper-dot-fraction-color);
    background: var(--sar-swiper-dot-fraction-bg);
  }
}