@import "{design}/app"

$switchSize = 55px
$seriesSpacing = 2px

.quickSwitchWrapper
  position: absolute
  top: 0
  &.middle
    left: 50%
    transform(translateX(-50%))
  &.left
    border-right: 1px solid $uiBorderColor
    right: 50%
  &.right
    left: 50%

.quickSwitch

  .switchSection
    display: inline-block
    float: left
    height: 100%
    position: relative

    &:hover
      .studySwitch .studyBox, .seriesSwitch .seriesItem
        opacity: 0
      .switchHover
        opacity: 0.8
      .studyHover
        transform(scale(1))

    .studySwitch .studyBox, .seriesSwitch .seriesItem
      transition(opacity 0.3s ease)

    .studySwitch, .seriesSwitch
      position: relative

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

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

      .seriesItem
        background-color: $boxBackgroundColorDark
        border-radius: 3px
        height: 15px
        margin: $seriesSpacing
        width: 15px

        &.count
          background-color: transparent
          color: $textPrimaryColor
          font-size: 12px
          font-weight: 500
          line-height: 17px
          text-align: center

        &.active
          background-color: $activeColor

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

.switchHover
  background: black
  border-radius: 5px
  opacity: 0
  overflow: hidden
  position: absolute
  top: 0
  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

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

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

// Responsive layout
$switchSmallSize = 35px
$seriesSmallSpacing = 1px

@media screen and (max-width: 1023px)
  .switchSection:hover .seriesHover
    transform(scale(0.5))
@media screen and (min-width: 1024px) and (max-width: 1151px)
  .switchSection:hover .seriesHover
    transform(scale(0.61))
@media screen and (min-width: 1152px) and (max-width: 1279px)
  .switchSection:hover .seriesHover
    transform(scale(0.69))
@media screen and (min-width: 1280px) and (max-width: 1359px)
  .switchSection:hover .seriesHover
    transform(scale(0.77))
@media screen and (min-width: 1360px) and (max-width: 1439px)
  .switchSection:hover .seriesHover
    transform(scale(0.82))
@media screen and (min-width: 1440px) and (max-width: 1599px)
  .switchSection:hover .seriesHover
    transform(scale(0.87))
@media screen and (min-width: 1600px) and (max-width: 1919px)
  .switchSection:hover .seriesHover
    transform(scale(0.97))
@media screen and (min-width: 1920px)
  .switchSection:hover .seriesHover
    transform(scale(1))

@media screen and (max-width: 1599px)
  .quickSwitch
    .switchSection
      .label
        font-size: 8px
        font-weight: 400
        line-height: 12px
        padding: 0
      .studySwitch .studyBox
        border-radius: 7px
        height: $switchSmallSize
        width: $switchSmallSize
      .seriesSwitch
        height: $switchSmallSize + $seriesSmallSpacing
        width: $switchSmallSize + $seriesSmallSpacing
        .seriesItem
          border-radius: 2px
          height: 10px
          margin: $seriesSmallSpacing
          width: 10px
          &.count
            font-size: 10px
            font-weight: 300
            line-height: 10px