.slider,
.slidingSlider {
  position: relative;

  height: 16px;

  cursor: pointer;
  user-select: none;
  &:focus {
    outline: 0 transparent none;
  }
}

.sliderButton {
  position: absolute;
  top: -48px;

  width: 100%;
  height: 64px;
  margin: 0;
  padding: 0;

  user-select: none;
  pointer-events: none;

  opacity: 0;
  border: 0 transparent none;
  background: transparent;
}

.slidingTip {
  display: inline-block;

  padding: 8px 16px;

  user-select: none;
  pointer-events: none;

  color: #fff;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
}

.sliderRail {
  position: absolute;
  top: 8px;
  left: 0;

  overflow: hidden;

  width: 100%;
  height: 5px;

  background-color: rgba(255, 255, 255, 0.2);
}

.sliderBuffered {
  position: absolute;

  width: 100%;
  height: 100%;

  transform: scaleX(0);
  transform-origin: center left;

  background-color: rgba(255, 255, 255, 0.5);
}

.sliderTrack {
  position: absolute;

  width: 100%;
  height: 100%;

  transform: translate(-100%, 0);

  background: #ff0000;
}

.sliderHandleRail {
  position: absolute;
  top: 4px;
  left: 0;

  width: 100%;
  height: 12px;

  transform: translate(-100%, 0);
}

.sliderHandle {
  position: absolute;
  top: 0;
  right: -6px;

  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;

  cursor: pointer;
  pointer-events: none;

  opacity: 0;
  border: transparent 0 none;
  border-radius: 50%;
  outline: 0 transparent none;
  background: #ff0000;
  box-shadow: none;
  &:focus {
    outline: 0 transparent none;
  }
  &:hover,
  &:active {
    box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.2);
  }
}

.slidingSlider {
  .sliderHandle {
    pointer-events: auto;

    opacity: 1;
  }
}

.slider:hover {
  .sliderHandle {
    pointer-events: auto;

    opacity: 1;
  }
}

.tooltip {
  position: absolute;
  bottom: 120%;
  left: 0;

  width: 100%;

  opacity: 0;
}

.tip {
  display: inline-block;

  padding: 0.4em 0.8em;

  transform: translateX(-50%);

  color: #fff;
  border-radius: 4px;
  background: #333;
  &:after {
    position: absolute;
    top: 100%;
    left: 50%;

    margin-left: -5px;

    content: '';

    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
  }
}

.slider:hover,
.slider:active,
.slidingSlider,
.slidingSlider:hover,
.slidingSlider:active {
  .tooltip {
    opacity: 1;
  }
}

// 手机或者平板不显示 tooltip
@media (hover: none), (pointer: coarse) {
  .slider:hover,
  .slider:active,
  .slidingSlider,
  .slidingSlider:hover,
  .slidingSlider:active {
    .tooltip {
      opacity: 0;
    }
  }

  .sliderButton {
    position: absolute;

    pointer-events: auto;

    opacity: 1;
  }

  .sliderHandle {
    pointer-events: auto;

    opacity: 1;
    // box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.2);
    box-shadow: none;
    // &:disabled {
    //   opacity: 0;
    //   pointer-events: none;
    //   box-shadow: none;
    // }
  }
  // .slider:hover .hidingsliderHandle,
  // .hidingsliderHandle,
  // .hidingsliderHandle:hover,
  // .hidingsliderHandle:focus,
  // .hidingsliderHandle:active {
  //   opacity: 0;
  //   pointer-events: none;
  //   box-shadow: none;
  // }
}