@import './var.less';

:root {
  --rv-swipe-slide-size: @swipe-slide-size;
  --rv-swipe-track-offset: @swipe-track-offset;
  --rv-swipe-border-radius: @swipe-border-radius;
  --rv-swipe-indicator-size: @swipe-indicator-size;
  --rv-swipe-indicator-margin: @swipe-indicator-margin;
  --rv-swipe-indicator-active-opacity: @swipe-indicator-active-opacity;
  --rv-swipe-indicator-inactive-opacity: @swipe-indicator-inactive-opacity;
  --rv-swipe-indicator-active-background-color: @swipe-indicator-active-background-color;
  --rv-swipe-indicator-inactive-background-color: @swipe-indicator-inactive-background-color;
}

.@{rv-prefix}-swiper {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--rv-swipe-border-radius);

  &--vertical {
    .@{rv-prefix}-swiper__track--allow-touch-move {
      touch-action: pan-x;
    }

    .@{rv-prefix}-swiper__track {
      transform: translateY(var(--rv-swipe-track-offset));

      &-inner {
        flex-direction: column;
        width: 100%;
        height: var(--rv-swipe-slide-width, var(--rv-swipe-slide-size));
      }
    }
  }

  &__track {
    width: 100%;
    height: 100%;
    padding: 0;
    white-space: nowrap;
    transform: translateX(var(--rv-swipe-track-offset));

    &--allow-touch-move {
      cursor: grab;
      touch-action: pan-y;
    }

    &-inner {
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      width: var(--rv-swipe-slide-width, var(--rv-swipe-slide-size));
      height: 100%;
      overflow: visible;
    }
  }
  &__slide {
    position: relative;
    display: block;
    flex: none;
    width: 100%;
    height: 100%;
    white-space: unset;
  }
  &__indicator {
    position: absolute;
    bottom: var(--rv-swipe-indicator-margin);
    left: 50%;
    transform: translateX(-50%);

    &--vertical {
      top: 50%;
      bottom: auto;
      left: var(--rv-swipe-indicator-margin);
      transform: translateY(-50%);
    }
  }
}

.@{rv-prefix}-swiper-item {
  display: block;
  width: 100%;
  height: 100%;
  white-space: normal;

  &--hidden {
    content-visibility: hidden;
  }
}

.@{rv-prefix}-indicator {
  display: flex;
  width: fit-content;

  &--vertical {
    flex-direction: column;

    .@{rv-prefix}-indicator__dot:not(:last-child) {
      margin-right: 0;
      margin-bottom: var(--rv-swipe-indicator-size);
    }
  }

  &__dot {
    display: block;
    width: var(--rv-swipe-indicator-size);
    height: var(--rv-swipe-indicator-size);
    margin-right: var(--rv-swipe-indicator-size);
    background-color: var(--rv-swipe-indicator-inactive-background-color);
    border-radius: 100%;
    opacity: var(--rv-swipe-indicator-inactive-opacity);
    transition: opacity var(--rv-animation-duration-fast),
      background-color var(--rv-animation-duration-fast);

    &:last-child {
      margin-right: 0;
    }
    &--active {
      background-color: var(--rv-swipe-indicator-active-background-color);
      opacity: var(--rv-swipe-indicator-active-opacity);
    }
  }
}