@import 'common/sass/variables';

$rail-height: 4px;
$handle-size: 22px;
$speed: 70ms;
$tooltip-bg: rgba(#222, 0.95);

.rc-slider {
  &-rail {
    background: $gray-lighter;
  }

  &-track {
    background: $brand-primary;
  }

  &-handle {
    top: 50%;
    width: $handle-size;
    height: $handle-size;
    background: $brand-primary;
    margin: 0;
    border: none;
    transform: translate(-50%, -50%);
  }

  &-tooltip {
    &-arrow {
      .rc-slider-tooltip-placement-top & {
        border-top-color: $tooltip-bg;
      }
    }

    &-inner {
      background: $tooltip-bg;
      padding: 7px 8px;
      height: 26px;
      box-shadow: none;
      border-radius: 3px;
    }
  }
}