@import './variables';

.#{$component-prefix}slider {
  position: relative;
  width: 100%;
  height: $slider-track-height;
  cursor: pointer;
  background-color: $slider-inactive-background-color;
  border-radius: $slider-border-radius;

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

  &__track {
    position: relative;
    width: 100%;
    height: 100%;
    background-color:$slider-active-background-color;
    border-radius: inherit;
    transition: all $slider-track-transition-duration;
  }

  &__thumb {
    width: $slider-thumb-width;
    height: $slider-thumb-height;
    background-color: $slider-thumb-background-color;
    border-radius: $slider-thumb-border-radius;
    box-shadow: $slider-thumb-box-shadow;

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

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

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

    .#{$component-prefix}slider__thumb-wrapper,
    .#{$component-prefix}slider__thumb-wrapper-left,
    .#{$component-prefix}slider__thumb-wrapper-right {
      cursor: not-allowed;
    }
  }

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

    .#{$component-prefix}slider__thumb-wrapper,
    .#{$component-prefix}slider__thumb-wrapper-right {
      top: auto;
      right: 50%;
      bottom: 0;
      transform: translate3d(50%, 50%, 0);
    }

    .#{$component-prefix}slider__thumb-wrapper-left {
      top: 0;
      right: 50%;
      left: auto;
      transform: translate3d(50%, -50%, 0);
    }

    // use pseudo element to expand click area
    &::before {
      top: 0;
      // TODO use scss var
      right: -$padding-xs;
      bottom: 0;
      left: -$padding-xs;
    }
  }
}