@swipe-indicator-color: #fff;
@swipe-indicators-offset: 10px;
@swipe-indicator-offset: 4px;

:root {
  --swipe-indicator-color: @swipe-indicator-color;
  --swipe-indicators-offset: @swipe-indicators-offset;
  --swipe-indicator-offset: @swipe-indicator-offset;
}

.var-swipe {
  position: relative;
  overflow: hidden;
  user-select: none;

  &__track {
    width: 100%;
    height: 100%;
    display: flex;
    transition-property: transform;
  }

  &__indicators {
    position: absolute;
    display: flex;
    bottom: var(--swipe-indicators-offset);
    left: 50%;
    transform: translateX(-50%);
  }

  &__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--swipe-indicator-color);
    opacity: 0.3;
    margin: 0 var(--swipe-indicator-offset);
    transition: opacity 0.3s;
  }

  &--vertical {
    flex-direction: column;
  }

  &--indicators-vertical {
    flex-direction: column;
    left: var(--swipe-indicators-offset);
    bottom: 50%;
    transform: translateY(50%);
  }

  &--indicator-active {
    opacity: 1;
  }

  &--indicator-vertical {
    margin: var(--swipe-indicator-offset) 0;
  }
}