@import '~antd/es/slider/style/index.less';
@import '~antd/es/tooltip/style/index.less';
@import '../variable.less';

@slider-prefix-cls: ~'@{ant-prefix}-slider';

.@{slider-prefix-cls} {
  font-size: @font-size-base;
  font-variant: tabular-nums;
  color: @text-color-secondary;
  box-sizing: border-box;
  list-style: none;
  position: relative;
  margin: @slider-margin;
  height: @slider-height;
  cursor: pointer;
  touch-action: none;

  &-rail,
  &-track {
    height: @slider-track-height;
  }

  &-dot {
    width: 0;
    border: 0;
  }

  &-mark {
    font-size: 12px;
    top: 18px;
  }

  &-handle {
    height: @slider-handle-height;
    width: @slider-handle-width;
    top: 2px;
    border: 0;
    border-radius: 1px;
    background-color: @primary-color;

    &:focus {
      box-shadow: none;
    }
  }

  &-handle::before {
    left: @slider-handle-tag-left;
  }

  &-handle::after {
    left: @slider-handle-tag-right;
  }

  &-handle::before,
  &-handle::after {
    content: '';
    height: 10px;
    width: 1px;
    background-color: white;
    top: 5px;
    position: absolute;
  }
  &:hover &-track,
  &-track {
    background-color: @primary-color;
  }
}