@import "{design}/app"

$imageSliderBorderRadius = 57px
$imageSliderTrackColor = rgba(0,0,0,0)
$imageSliderBorder = none

// Note that these are backwards due to the magic needed to make a cross-browser vertical slider
$imageSliderWidth = 12px
$imageSliderHeight = 39px
$imageSliderCursor = grab

.imageControls
  position: absolute
  top: 0
  right: 0
  height: 100%
  padding: 5px

  #scrollbar
    height: calc(100% - 20px);
    margin-top: 5px
    width: 31px

    #imageSlider
      position: absolute
      left: 20px

      vendorize(transform, rotate(90deg))
      vendorize(transform-origin, top left)

      -webkit-appearance: none
      background-color: $imageSliderTrackColor

      // Remove focus highlights on range input
      &:focus
        outline: none
        vendorize(box-shadow, none)

      // Remove focus border in Firefox
      &::-moz-focus-outer
        border: none

      // --- Style the range track --- //
      &::-webkit-slider-runnable-track
        height: 5px
        border: none
        cursor: pointer
        background-color: $imageSliderTrackColor
        z-index: 6

      &::-moz-range-track
        height: 2px
        border: none
        cursor: pointer
        background-color: $imageSliderTrackColor
        z-index: 6

      &::-ms-track
        width: 100%
        height: 2px
        border: none
        cursor: pointer
        animate: 0.2s
        background: transparent
        border-width: 15px 0
        color: $imageSliderTrackColor

      // Hide any fill IE tries to add
      &::-ms-fill-lower
        background: $imageSliderTrackColor

      &::-ms-fill-upper
        background: $imageSliderTrackColor

      // --- Style the range thumb --- //
      &::-webkit-slider-thumb
        -webkit-appearance: none !important
        theme('background-color', '$imageSliderColor')
        border-radius: $imageSliderBorderRadius
        border: $imageSliderBorder
        height: $imageSliderWidth
        width: $imageSliderHeight
        cursor: $imageSliderCursor
        margin-top: -7px

        &:active
          theme('background-color', '$activeColor')

      &::-moz-range-thumb
        theme('background-color', '$imageSliderColor')
        border-radius: $imageSliderBorderRadius
        border: $imageSliderBorder
        height: $imageSliderWidth
        width: $imageSliderHeight
        cursor: $imageSliderCursor
        z-index: 7

        &:active
          theme('background-color', '$activeColor')

      &::-ms-thumb
        theme('background-color', '$imageSliderColor')
        border-radius: $imageSliderBorderRadius
        border: $imageSliderBorder
        height: $imageSliderWidth
        width: $imageSliderHeight
        cursor: $imageSliderCursor

        &:active
          theme('background-color', '$activeColor')

// Set left position in IE, border-width attribute breaks left position of imageSlider
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
  #imageSlider
    left: 50px