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

.van-slider {
  position: relative;
  border-radius: 999px;
  .theme(background-color, '@gray-light');

  // use pseudo element to expand click area
  &::before {
    position: absolute;
    top: -@padding-xs;
    right: 0;
    bottom: -@padding-xs;
    left: 0;
    content: '';
  }

  &__bar {
    position: relative;
    border-radius: inherit;
    transition: width @animation-duration-fast;
    .theme(background-color, '@blue');
  }

  &__button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    .theme(background-color, '@white');

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

  &--disabled {
    opacity: 0.3;
  }
}