@import '../../scss/variables.scss';

// #variables
$s-swiper-dots-gap: 10px !default;
$s-swiper-dot-width: 8px !default;
$s-swiper-dot-height: 8px !default;
$s-swiper-dot-gap: 8px !default;
$s-swiper-dot-border-radius: 50% !default;
$s-swiper-dot-bg: rgba(255, 255, 255, 0.3) !default;
$s-swiper-dot-active-bg: rgba(255, 255, 255, 1) !default;
// #endvariables

.s-swiper {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  overflow: hidden;
  list-style: none;
  touch-action: pan-y;

  &:not(.s-swiper-touchable) {
    touch-action: auto;
  }

  @at-root {
    .s-swiper-wrapper {
      position: relative;
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 100%;
      box-sizing: content-box;
      will-change: transform;

      @at-root {
        .s-swiper-item {
          position: relative;
          width: 100%;
          height: 100%;
          flex-shrink: 0;
          cursor: grab;
        }
      }
    }
  }
}
.s-swiper-dots {
  position: absolute;
  bottom: $s-swiper-dots-gap;
  left: 50%;
  display: flex;
  transform: translateX(-50%);

  .s-swiper-vertical & {
    bottom: auto;
    left: $s-swiper-dots-gap;
    top: 50%;
    flex-direction: column;
    transform: translateY(-50%);
  }

  @at-root {
    .s-swiper-dot {
      width: $s-swiper-dot-width;
      height: $s-swiper-dot-height;
      border-radius: $s-swiper-dot-border-radius;
      background-color: $s-swiper-dot-bg;
      &:not(:first-child) {
        margin-left: $s-swiper-dot-gap;
        .s-swiper-vertical & {
          margin-left: 0;
          margin-top: $s-swiper-dot-gap;
        }
      }
      &.s-swiper-dot-active {
        background-color: $s-swiper-dot-active-bg;
      }
      .s-swiper-dot-clickable & {
        cursor: pointer;
      }
    }
  }
}

.s-swiper-vertical {
  touch-action: pan-x;

  .s-swiper-wrapper {
    flex-direction: column;
  }
}