// 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