$NAME: zoomist

// core elements
.#{$NAME}-container
  position: relative
  touch-action: none
  user-select: none

.#{$NAME}-wrapper
  position: absolute
  z-index: 1
  top: 0
  left: 0
  right: 0
  bottom: 0
  overflow: hidden
  background-color: #f4f4f4

.#{$NAME}-image
  position: absolute
  top: 0
  left: 0
  max-width: none !important
  max-height: none !important
  pointer-events: none

// module elements
// slider
.#{$NAME}-slider
  position: absolute
  z-index: 2
  top: 0
  left: 0
  background-color: rgba(255, 255, 255, .8)
  border-radius: 0 0 5px 0

.#{$NAME}-slider-main
  position: relative
  display: flex
  justify-content: flex-start
  &:hover
    .#{$NAME}-slider-bar
      background-color: #aaa
    .#{$NAME}-slider-button::before
      box-shadow: 0 0 10px rgba(0, 0, 0, .6)
  &.zoomist-slider-horizontal
    align-items: flex-start
    width: 150px
    padding: 20px 0
    margin: 0 20px
    .#{$NAME}-slider-bar
      top: calc( 50% - 1px )
      left: 0
      width: 100%
      height: 2px
  &.zoomist-slider-vertical
    align-items: flex-end
    height: 150px
    padding: 0 20px
    margin: 20px 0
    .#{$NAME}-slider-bar
      top: 0
      left: calc( 50% - 1px )
      width: 2px
      height: 100%

.#{$NAME}-slider-bar
  display: block
  position: absolute
  z-index: 0
  border-radius: 1px
  background-color: #ccc
  transition: background-color .3s

.#{$NAME}-slider-button
  display: block
  position: relative
  z-index: 1
  width: 0 !important
  height: 0 !important
  &::before
    position: absolute
    display: block
    content: ''
    left: -5px
    top: -5px
    width: 10px
    height: 10px
    background-color: #fff
    border-radius: 50%
    box-shadow: 0 0 5px rgba(0, 0, 0, .4)
    transition: box-shadow .3s

// zoomer
.#{$NAME}-zoomer
  position: absolute
  z-index: 2
  top: 0
  right: 0
  border-radius: 0 0 0 5px
  overflow: hidden

.#{$NAME}-in-zoomer, .#{$NAME}-out-zoomer
  position: relative
  width: 50px
  height: 50px
  cursor: pointer
  background-color: rgba(255, 255, 255, .8)
  transition: background-color .3s
  &:hover
    background-color: rgba(255, 255, 255, .9)
  svg
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    width: 12px
    fill: #333

.#{$NAME}-zoomer-disable
  pointer-events: none
  opacity: .6
