// Colors based on Chromium engine
// (every browser renders its input range on its own, here we are trying
// to add some consistency)
$range-bg-color: $gray-175;
$range-border-color: $gray-400;
$range-bg-progress-color: $secondary;
$range-height: 8px;
$range-radius: 3px;
$knob-size: 14px;

.range-control {
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;

  &__label {
    font-size: 14px;
    color: $gray-700;
    margin-bottom: space-x(0.5);
  }

  // enhance hover area of ".range-slider" placeholder
  // (cf ".range-slider")
  &:hover .range-slider .range-slider__placeholder {
    display: block;
  }
}

///////////////////////////////////////////////

.range-slider {
  $self: &;
  $placeholder-offset-y: -32px;

  position: relative;
  width: 100%;
  height: $range-height;

  &__scale {
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: $range-bg-color;
    border: 1px solid $range-border-color;
    border-radius: $range-radius;
  }

  &__scale-sel {
    position: absolute;
    background-color: $range-bg-progress-color;
    width: inherit;
    height: inherit;
    border-radius: $range-radius;
    border: 1px solid $range-border-color;
  }

  &__knob {
    @include unselectable;
    @include clickable;

    z-index: 1;
    background-color: $range-bg-progress-color;
    width: $knob-size;
    height: $knob-size;
    border-radius: 50%;
    position: absolute;
    box-shadow: 0 0 1px 0 $range-bg-progress-color;

    // alignement with the bar
    transform: translateX(-5px) translateY(-3px);

    &.disabled {
      cursor: not-allowed;
    }

    &:hover {
      background-color: darken($range-bg-progress-color, 15%);
    }
  }

  &__placeholder {
    display: none;
    background-color: $black;
    color: $white;
    position: absolute;
    padding: space-x(0.5) space-x(1);
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0 0 1px 0 $black;
    opacity: 0.8;
    transform: translateX(-25%) translateY($placeholder-offset-y);
  }

  &:hover & {
    &__placeholder {
      display: block;
    }
  }
}

////////////////////////////////////////////

.range-simple {
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
  position: relative;

  &__label {
    font-size: 14px;
    color: $gray-700;
  }

  &__field {
    position: relative;
  }

  & input[disabled] {
    cursor: not-allowed;
  }
}

////////////////////////////////////////////

// Cross browser rules
//
// (?) Range consistency issue between browsers UI engine: mostly rely on
//     Chromium UI and adapt it to other engine
//
// Some examples:
// @link https://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
input[type=range] {
  @include clickable;

  width: 100%;
}

// Styling FireFox input range, mimicking Chromium one
//
// (?) * unable to differenciate selector betwenn background range and progress
//       one → set only background range
//     * unable to position the input ideally → have to rely on
//       absolute + position
input[type=range] {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
  $chromium-offset-y: 4px;

  height: $range-height;
  border-radius: $range-radius;
  border: 1px solid $range-border-color;
  background: $range-bg-color;
  width: 100%;
  position: absolute;
  top: $chromium-offset-y;
}

input[type=range]::-webkit-slider-thumb {
  $chromium-offset-y: -4px;

  -webkit-appearance: none;
  transform: translateY($chromium-offset-y);
  border: none;
  height: $knob-size;
  width: $knob-size;
  border-radius: 50%;
  background-color: $range-bg-progress-color;
  box-shadow: 0 0 1px 0 $range-bg-progress-color;
}

// Styling FireFox input range, mimicking Chromium one
//
// (?) * unable to differenciate selector betwenn background range and progress
//       one → set only background range
//     * unable to position the input ideally → have to rely on
//       translation
input[type=range]::-moz-range-track {
  $firefox-height: #{$range-height - 2px};
  $firefox-offset-y: -2px;

  height: $firefox-height;
  border-radius: $range-radius;
  border: 1px solid $range-border-color;
  background: $range-bg-color;
  transform: translateY($firefox-offset-y);
}

input[type=range]::-moz-range-thumb {
  $firefox-offset-y: -2px;

  border: none;
  height: $knob-size;
  width: $knob-size;
  border-radius: 50%;
  background-color: $range-bg-progress-color;
  box-shadow: 0 0 2px 0 $range-bg-progress-color;
  transform: translateY($firefox-offset-y);
}

// hide the outline behind the border
input[type=range]:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px;
}