//  =================
//      Imports
//  =================

@import '../../base/base';    // Base Variables

.custom-progress {
  &.progress-up .range-count {
    margin-bottom: 15px;
  }

  &.progress-down .range-count {
    margin-top: 15px;
  }
}

.range-count {
  font-weight: 700;
  color: $dark;

  .range-count-number {
    display: inline-block;
    background: $m-color_12;
    padding: 3px 8px;
    border-radius: 5px;
    color: $m-color_14;
    border: 1px solid $m-color_12;
  }

  .range-count-unit {
    color: $m-color_14;
  }
}

.custom-progress {
  &.top-right .range-count, &.bottom-right .range-count {
    text-align: right;
  }
}

.progress-range-counter {
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: $m-color_14;
    cursor: pointer;
    height: 16px;
    width: 16px;
    margin-top: -4px;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
  }

  &:active::-webkit-slider-thumb {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }

  &:focus::-webkit-slider-thumb {
    background: $m-color_14;
    cursor: pointer;
    height: 16px;
    width: 16px;
    margin-top: -4px;
    box-shadow: none;
  }

  &::-moz-range-thumb {
    background: $m-color_14;
    cursor: pointer;
    height: 16px;
    width: 16px;
    margin-top: -4px;
  }
}

input[type=range] {
  &::-webkit-slider-runnable-track, &::-moz-range-track, &::-ms-track {
    background: $m-color_18;
  }
}