@import './var.less';
.slider {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;

  .rail {
    width: 100%;
    background-color: @slider-rail-background-color;
  }

  .disabled {
    pointer-events: none;
    opacity: @disabled-opacity;
  }
  .rail,
  .track {
    position: absolute;
    height: @slider-height;
    border-radius: @slider-radius;
    transition: background-color 0.3s;
  }

  .handle {
    position: absolute;
    box-sizing: border-box;
    text-align: center;
    max-width: 12.6em;
    padding: @slider-handle-padding;
    background-color: @slider-handle-background-color;
    border-radius: 1em;
    font-size: @slider-handle-font-size;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.6s,
      transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28),
      -webkit-box-shadow 0.6s,
      -webkit-transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transform: translateX(-50%);
  }
}
