.react-draggable-dragging {
  user-select: none;
}

.dig-slider {
  $fill-gutter: $slider-handle-size-disabled - $slider-track-size;

  @mixin handle-size($size) {
    width: $size;
    height: $size;
  }

  -webkit-touch-callout: none;
  cursor: default;
  height: $slider-handle-size-active;
  position: relative;

  .dig-slider-track {
    position: absolute;
    top: ($slider-handle-size-active - $slider-track-size) / 2;
    left: 0;
    width: 100%;
    height: $slider-track-size;
  }

  .dig-slider-selection {
    position: absolute;
    top: 0;
    height: 100%;

    .dig-slider-selection-fill {
      height: 100%;
      @include ease-out($property: margin);
    }
  }

  .dig-slider-selection-low {
    left: 0;

    .dig-slider-selection-fill {
      background-color: $slider-selection-color;
      margin-right: $fill-gutter;
    }
  }

  .dig-slider-selection-high {
    right: 0;

    .dig-slider-selection-fill {
      background-color: $slider-track-color;
      margin-left: $fill-gutter;
    }
  }

  .dig-slider-handle {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0%;
    z-index: 1;
    margin: ($slider-track-size / 2) 0 0 0;

    background-clip: padding-box;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition:
      border 450ms $ease-out-function,
      width 450ms $ease-out-function,
      height 450ms $ease-out-function;

    @include handle-size($slider-handle-size);

    &:focus {
      outline: none;
    }
  }

  &:not(.dig-disabled) {
    .dig-slider-handle {
      border: 0px solid transparent;
      background-color: $slider-selection-color;
      &:active {
        @include handle-size($slider-handle-size-active);
      }
    }

    &:hover, &:focus {
      .dig-slider-selection-high {
        .dig-slider-selection-fill {
          background: $slider-track-color-selected;
        }
      }

      &:not(.dig-slider-zero) {
        .dig-slider-handle:not(:active) {
          border: $slider-handle-size solid rgba($slider-selection-color, 0.2);
          @include handle-size($slider-handle-size-active + $slider-handle-size);
        }
      }
    }

    &.dig-slider-zero {
      .dig-slider-handle {
        border: $slider-track-size solid $slider-track-color;
        background-color: transparent;
        box-shadow: none;

        &:active {
          border-color: $slider-track-color-selected;
          width: $slider-handle-size-active !important;
          height: $slider-handle-size-active !important;
          transition:
            background-color 450ms $ease-out-function,
            width 450ms $ease-out-function,
            height 450ms $ease-out-function;

          & ~ .dig-slider-selection-high .dig-slider-selection-fill {
            margin-left: $slider-handle-size !important;
            @include ease-out($property: margin);
          }
        }
      }

      &:hover, &:focus {
        .dig-slider-handle {
          $size: $slider-handle-size + $slider-track-size;
          border: $slider-track-size solid $slider-handle-color-zero;
          width: $size;
          height: $size;
        }
      }
    }
  }

  &.dig-disabled {
    $gutter: ($slider-handle-size-disabled + $slider-track-size) / 2;

    cursor: not-allowed;

    .dig-slider-selection-fill {
      background-color: $slider-track-color;
    }

    .dig-slider-handle {
      cursor: not-allowed;
      background-color: $slider-track-color;
      @include handle-size($slider-handle-size-disabled);
    }

    &.dig-slider-zero {
      .dig-slider-selection-low .dig-slider-selection-fill {
        margin-right: $gutter;
      }
      .dig-slider-selection-high .dig-slider-selection-fill {
        margin-left: $gutter;
      }
      .dig-slider-handle {
        border: $slider-track-size solid $slider-track-color;
        background-color: transparent;
      }
    }
  }
}