/* // Base Colors */
// $shade-0: #fff !default;
// $teal: #1abc9c !default;

#hlx-slide-control-0003.range-slider {
  //   margin: 60px 0 0 0%;
  width: 100%;
  /* // Range Slider */
  $range-width: 100% !important;

  $range-handle-color: var(--hlx-color-primary);
  // $range-handle-color-hover: $teal !default;
  $range-handle-size: 20px !default;

  $range-track-color: var(--hlx-border-color-light) !default;
  $range-track-height: 5px !default;

  // $range-label-color: $shade-10 !default;
  $range-label-width: 60px !default;

  .range-slider {
    width: $range-width;
  }

  .range-slider__range {
    -webkit-appearance: none;
    appearance: none;
    // width: calc(100% - (#{$range-label-width + 13px}));
    width: 100%;
    height: $range-track-height;
    border-radius: 5px;
    background: $range-track-color;
    /* outline: none; */

    /* border:solid; */
    padding: 0;
    margin: 0;

    /* // Range Handle */
    &::-webkit-slider-thumb {
      appearance: none;
      width: $range-handle-size;
      height: $range-handle-size;
      border-radius: 50%;
      border: 1px solid white;
      background: $range-handle-color;
      cursor: pointer;
      transition: background 0.11s ease-in-out;

      // &:hover {
      //   /* background: $range-handle-color-hover; */
      // }
    }

    //   &:active::-webkit-slider-thumb {
    //     /* background: $range-handle-color-hover; */
    //   }

    &::-moz-range-thumb {
      width: $range-handle-size;
      height: $range-handle-size;
      border: 0;
      border-radius: 50%;
      background: $range-handle-color;
      cursor: pointer;
      transition: background 0.5s ease-in-out;
    }

    //   &:active::-moz-range-thumb {
    //     background: $range-handle-color-hover;
    //   }

    /* // Focus state */
    //   &:focus {
    //     &::-webkit-slider-thumb {
    //       /* box-shadow: 0 0 0 3px $shade-0, 0 0 0 6px $teal; */
    //     }
    //   }
  }

  /* // Range Label */
  /* .range-slider__value {
                display: inline-block;
                position: relative;
                width: $range-label-width;
                color: $shade-0;
                line-height: 20px;
                text-align: center;
                border-radius: 3px;
                background: $range-label-color;
                padding: 5px 10px;
                margin-left: 8px;
                
                &:after {
                    position: absolute;
                    top: 8px;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 7px solid $range-label-color;
    border-bottom: 7px solid transparent;
    content: "";
}
} */

  /* // Firefox Overrides */
  ::-moz-range-track {
    background: $range-track-color;
    border: 0;
  }

  input::-moz-focus-inner,
  input::-moz-focus-outer {
    border: 0;
  }
}