ohif-viewer/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl

@import "{design}/app"

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

.quickSwitch
  height: 80px
  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)

  div.switchSection
    display: inline-block
    float: left
    margin: 0 5px

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

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

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

      svg
        width: $switchSize
        height: $switchSize

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

.studyHover, .seriesHover
  position: absolute
  z-index: 10000
  top: $switchHeight
  width: 400px
  height: 500px
  background: black
  opacity: 0.8
  border-radius: 5px
  transition(all 0.3s ease)

.studyHover
  left: -350px
  width: 400px

.seriesHover
  left: 50px
  width: 700px

  &.tiny
    width: 0
    height: 0
    opacity: 0

  .thumbnailEntry
    margin: 0
    width: 33%
    display: inline-block

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