$baseSliderHeight: 8px;
$thinSliderHeight: 3px;
$fatSliderHeight: 1em;
$sliderMargin: 14px 0;

$baseSliderBg: #f2f2f2;

$sliderHandleSize: 1em;

.be-slider {
  width: 100%;
  height: $baseSliderHeight;
  position: relative;
  margin: $sliderMargin;
  background-color: $baseSliderBg;
  border-radius: calc($baseSliderHeight / 2);
  padding: 0 !important;
  &.thin {
    height: $thinSliderHeight;
  }
  &.fat {
    height: $fatSliderHeight;
    border-radius: 0.5em;
    .result-slider {
      border-radius: $fatSliderHeight;
    }
  }
  &.labeled {
    margin-bottom: 2.5em;
  }
  input {
    position: absolute;
    top: 50px;
  }
  .result-slider {
    color: #ccc;
    position: absolute;
    height: 100%;
    border-radius: calc($baseSliderHeight / 2);
    box-shadow: none;
  }
  .control-btn {
    cursor: grab;
    outline: 0;
    position: absolute;
    width: $sliderHandleSize;
    height: $sliderHandleSize;
    // border: 2px solid #454545;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.16);
    border-radius: 50%;
    background-color: #fff;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    &:before {
      content: '';
      position: absolute;
      top: 0.1em;
      left: 0.1em;
      // background-color: #000;
      background-color: transparent;
      width: 0.8em;
      height: 0.8em;
      // border: 3px solid #6d9d72;
      border-radius: 50%;
    }
    .tooltip {
      display: none;
      padding: 4px 8px;
      position: absolute;
      min-width: max-content;
      bottom: 100%;
      left: 50%;
      z-index: 9999;
      margin-bottom: 10px;
      border-radius: 4px;
      background-color: #505050;
      color: #fff;
      font-size: 0.8em;
      transform: translateX(-50%);
      &:before {
        content: '';
        position: absolute;
        margin-top: -1px;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-top: 6px solid #505050;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
      }
    }
    &:hover {
      transform: translate(-50%, -50%) scale(1.2);
      .tooltip {
        display: block;
      }
    }
    &:active {
      cursor: grabbing;
    }
    &.catching {
      background-color: #454545;
    }
  }
  .break-point {
    cursor: pointer;
    background-color: #fff;
    position: absolute;
    width: 8px;
    height: 100%;
    top: 0;
    transform: translateX(-50%);
  }
  .slider-title {
    // position: absolute;
    bottom: 100%;
  }
  .label-text {
    position: relative;
    width: 100%;
    top: 100%;
    display: block;
    margin: 0;
    & > div {
      position: absolute;
      top: 0;
      margin-top: 10px;
      padding: 4px;
      color: #999;
      // background-color: #fff;
      text-align: center;
      min-width: 50px;
      &.start-label {
        left: 0;
        transform: translateX(-50%);
      }
      &.end-label {
        right: 0;
        transform: translateX(50%);
      }
      &.current-label {
        transform: translateX(-50%);
        color: #454545;
        font-weight: 700;
        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          border-bottom: 6px solid #454545;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
        }
      }
    }
  }
  &.disabled {
    pointer-events: none;
    opacity: 0.6;
    .result-slider {
      background-color: #ccc;
    }
    .control-btn {
      cursor: not-allowed;
      border-color: #d6d6d6;
      &::before {
        border-color: #d6d6d6;
      }
    }
  }
}