@import "{design}/app"

$switchSize = 50px

.quickSwitch
  height: 80px
  position: absolute
  top: 5px
  width: 140px

  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
  position: absolute
  z-index: 10000
  top: 70px
  left: -350px
  width: 400px
  height: 500px
  background: black
  opacity: 0.8
  border-radius: 5px
  transition(all 0.3s ease)

.seriesHover
  position: absolute
  z-index: 10000
  top: 70px
  left: 50px
  width: 700px
  height: 900px
  background: black
  opacity: 0.8
  border-radius: 5px
  transition(all 0.3s ease)

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

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

$switchSizeSmall = 30px
@media screen and (max-width: 1600px)
  .quickSwitch div.switchSection
    .label
      font-size: 8px
      font-weight: 400
      padding: 0
    .studySwitch
      border-radius: 7px
    .studySwitch, .seriesSwitch
      &, svg
        width: $switchSizeSmall
        height: $switchSizeSmall