@import 'common/sass/variables';

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

@keyframes slider-loading {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
}

.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;
    }
  }

  // Disabled styles
  &-disabled {
    background: none;

    .rc-slider {
      &-handle,
      &-track {
        display: none;
      }

      &-rail {
        animation: slider-loading 1s ease infinite;
      }
    }
  }
}