@import "{design}/app"

$switchSize = 50px
$switchTop = 5px
$switchHeight = 70px
$switchWrapperWidth = 140px

.quickSwitch
  height: $switchHeight
  position: absolute
  top: $switchTop
  width: $switchWrapperWidth

  &.middle
    left: 'calc(50% - %s)' % ($switchWrapperWidth / 2)
  &.left
    left: 'calc(50% - %s - 20px)' % $switchWrapperWidth
  &.right
    left: calc(50% + 20px)

  .switchSection
    display: inline-block
    float: left
    height: 100%
    margin: 0 5px
    position: relative

    &:hover
      .studySwitch, .seriesSwitch
        opacity: 0
      .switchHover
        opacity: 0.8

    .label
      color: $textSecondaryColor
      display: block
      font-size: 12px
      font-weight: 300
      text-align: center
      text-transform: uppercase

    .studySwitch, .seriesSwitch
      transition(all 0.3s ease)

    .studySwitch
      background-color: $darkUiColor
      border: solid 1px $activeColor
      border-radius: 11px
      display: block
      height: $switchSize
      margin: 0 auto
      width: $switchSize

    .seriesSwitch
      display: block
      height: $switchSize
      width: $switchSize

      svg
        height: $switchSize
        width: $switchSize

.mirror-x
  transform(scaleX(-1))

.switchHover
  background: black
  border-radius: 5px
  opacity: 0
  overflow: hidden
  position: absolute
  top: 18px
  transform(scale(0))
  transition(all 0.3s ease)
  z-index: 10000

  .scrollArea
    margin-right: -20px
    min-height: 200px
    max-height: 500px
    overflow-y: scroll
    width: calc(100% + 20px)

.studyHover
  width: 300px

.seriesHover
  width: 711px

  .thumbnailEntry
    margin: 0

.quickSwitch.left, .quickSwitch.middle
  .seriesHover .thumbnailEntry
    float: right
  .studyHover
    left: 0
    transform-origin(0% 0%)
  .seriesHover
    right: 0
    transform-origin(100% 0%)

.quickSwitch.right
  .seriesHover .thumbnailEntry
    float: left
  .studyHover
    right: 0
    transform-origin(100% 0%)
  .seriesHover
    left: 0
    transform-origin(0% 0%)

// Responsive layout
$switchSizeSmall = 35px

@media screen and (max-width: 1024px)
  .switchSection:hover .switchHover
    transform(scale(0.5))
@media screen and (min-width: 1025px) and (max-width: 1152px)
  .switchSection:hover .switchHover
    transform(scale(0.6))
@media screen and (min-width: 1153px) and (max-width: 1280px)
  .switchSection:hover .switchHover
    transform(scale(0.7))
@media screen and (min-width: 1281px) and (max-width: 1440px)
  .switchSection:hover .switchHover
    transform(scale(0.8))
@media screen and (min-width: 1441px) and (max-width: 1600px)
  .switchSection:hover .switchHover
    transform(scale(0.9))
@media screen and (min-width: 1601px)
  .switchSection:hover .switchHover
    transform(scale(1))

@media screen and (max-width: 1600px)
  .quickSwitch
    height: 45px
    &.left
      left: 'calc(50% - %s - 8px)' % $switchWrapperWidth
    &.right
      left: calc(50% + 8px)
    .switchSection
      .switchHover
        top: 8px
      .label
        font-size: 8px
        font-weight: 400
        padding: 0
      .studySwitch
        border-radius: 7px
      .studySwitch, .seriesSwitch
        &, svg
          height: $switchSizeSmall
          width: $switchSizeSmall