@import "{ohif: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

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

  .scrollbar
    height: calc(100% - 20px)
    margin-top: 5px
    position: relative
    width: 12px

    .imageSlider
      height: $imageSliderWidth
      left: 12px
      padding: 0
      position: absolute
      top: 0

      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
        background-color: $imageSliderTrackColor
        border: none
        cursor: pointer
        height: 5px
        z-index: 6

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

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

      // 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: $imageSliderBorder
        border-radius: $imageSliderBorderRadius
        cursor: -webkit-grab
        height: $imageSliderWidth
        margin-top: -4px
        width: $imageSliderHeight

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

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

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

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

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

      &::-ms-tooltip
        display: none

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