@import '../common/style/var.less';

.van-slider {
  position: relative;
  height: var(--slider-bar-height, @slider-bar-height);
  border-radius: @border-radius-max;
  background-color: var(
    --slider-inactive-background-color,
    @slider-inactive-background-color
  );

  // use pseudo element to expand click area
  &::before {
    position: absolute;
    right: 0;
    left: 0;
    content: '';
    top: calc(-1 * var(--padding-xs, @padding-xs));
    bottom: calc(-1 * var(--padding-xs, @padding-xs));
  }

  &__bar {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(
      --slider-active-background-color,
      @slider-active-background-color
    );
    border-radius: inherit;
    transition: all @animation-duration-fast;
  }

  &__button {
    width: var(--slider-button-width, @slider-button-width);
    height: var(--slider-button-height, @slider-button-height);
    border-radius: var(
      --slider-button-border-radius,
      @slider-button-border-radius
    );
    box-shadow: var(--slider-button-box-shadow, @slider-button-box-shadow);
    background-color: var(
      --slider-button-background-color,
      @slider-button-background-color
    );

    &-wrapper,
    &-wrapper-right {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate3d(50%, -50%, 0);
    }

    &-wrapper-left {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate3d(-50%, -50%, 0);
    }
  }

  &--disabled {
    opacity: var(--slider-disabled-opacity, @slider-disabled-opacity);
  }
}