.s-slider {
  position: relative;
  width: 100%;
  height: $slider-bar-height;
  cursor: pointer;
  border-radius: $border-radius-max;
  background: $slider-inactive-background;

  &::before {
    position: absolute;
    top: -$padding-xs;
    right: 0;
    bottom: -$padding-xs;
    left: 0;
    content: '';
  }

  &__bar {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all $animation-duration-fast;
    border-radius: inherit;
    background: $slider-active-background;
  }

  &__button {
    width: $slider-button-width;
    height: $slider-button-height;
    border-radius: $slider-button-border-radius;
    background: $slider-button-background;
    box-shadow: $slider-button-box-shadow;

    &-wrap {
      position: absolute;
      top: 50%;
      right: 0;
      cursor: grab;
      transform: translate3d(50%, -50%, 0);
      touch-action: none;
    }

    &-wrap-start {
      position: absolute;
      top: 50%;
      left: 0;
      cursor: grab;
      transform: translate3d(-50%, -50%, 0);
      touch-action: none;
    }

    &-wrap-end {
      position: absolute;
      top: 50%;
      right: 0;
      cursor: grab;
      transform: translate3d(50%, -50%, 0);
      touch-action: none;
    }
  }

  &--readonly {
    cursor: default;

    .s-slider__button-wrap,
    .s-slider__button-wrap-start,
    .s-slider__button-wrap-end {
      cursor: default;
    }
  }

  &--disabled {
    cursor: not-allowed;
    opacity: $slider-disabled-opacity;

    .s-slider__button-wrap,
    .s-slider__button-wrap-start,
    .s-slider__button-wrap-end {
      cursor: not-allowed;
    }
  }

  &--vertical {
    display: inline-block;
    width: $slider-bar-height;
    height: 100%;

    .s-slider__button-wrap {
      top: 0;
      right: 50%;
      bottom: auto;
      transform: translate3d(50%, -50%, 0);
    }

    .s-slider__button-wrap-start {
      top: auto;
      right: 50%;
      bottom: 0;
      left: auto;
      transform: translate3d(50%, 50%, 0);
    }

    .s-slider__button-wrap-end {
      top: 0;
      right: 50%;
      bottom: auto;
      transform: translate3d(50%, -50%, 0);
    }

    &::before {
      top: 0;
      right: -$padding-xs;
      bottom: 0;
      left: -$padding-xs;
    }
  }
}