@import "{design}/app"

$switchSize = 55px
$seriesSpacing = 2px

.quickSwitchWrapper
  position: absolute
  top: 0

  &.middle
    left: 50%

    .quickSwitch
      transform(translateX(-50%))

  &.left
    border-right: 1px solid $uiBorderColor
    right: 50%

  &.right
    left: 50%

  &.overlay .quickSwitch
    transition(z-index 0s linear 0s)
    z-index: 3

  &:before
    background-color: $primaryBackgroundColor
    bottom: 0
    content: ''
    left: 0
    opacity: 0
    position: fixed
    right: 0
    top: 0
    transition(opacity 0.3s ease\, visibility 0s linear 0.3s)
    visibility: hidden
    z-index: 2

  &.overlay:before
    opacity: 0.8
    transition(opacity 0.3s ease\, visibility 0s linear 0s)
    visibility: visible

.quickSwitch
  position: relative
  transition(z-index 0s linear 0.3s)
  z-index: 1

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

    &.switchSectionSeries.hover, &.switchSectionStudy:hover
      .seriesSwitch .seriesItem
        opacity: 0
      .switchHover
        opacity: 1
      .studyHover
        height: auto
        padding-top: $switchSize
        transition(padding-top 0.3s ease\, visibility 0s linear 0s)
        visibility: visible

    &.switchSectionSeries.hover
      .seriesHover
        .thumbnailsWrapper
          transform(scale(0.9) translateY($switchSize))
          transition(all 0.3s ease)
        .thumbnailEntry .seriesDetails
          opacity: 0
          visibility: hidden

      &:hover .seriesHover
        .thumbnailsWrapper
          transform(scale(1) translateY(0))
        .thumbnailEntry .seriesDetails
          opacity: 1
          transform(translateY(0))
          transition(all 0.3s ease)
          transition-delay(0.3s)
          visibility: visible

    .seriesHover .thumbnailEntry .seriesDetails
      opacity: 0
      transform(translateY(-36px))

    .seriesSwitch .seriesItem
      transition(opacity 0.3s ease)

    .studySwitch, .seriesSwitch
      position: relative

    .studySwitch
      .studyTimepointBrowser
        background-color: transparent
      .studyTimepointStudy.active .studyModality
        box-shadow: inset 0 0 0 3px $activeColor
      .studyBox
        background-color: $uiGrayDarker
        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
  border: 10px solid transparent
  border-radius: 5px
  margin: -10px
  opacity: 0
  overflow: hidden
  position: absolute
  top: 0
  z-index: 10000

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

.studyHover
  height: 0
  padding-top: 0
  transition(padding-top 0.3s ease\, visibility 0s linear 0.3s)
  visibility: hidden
  width: 320px

  .scrollArea
    height: 500px

.seriesHover
  transform(scale(0))
  transition(all 0.3s ease)
  width: 731px

  .thumbnailEntry
    margin: 0

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

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

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

@media screen and (max-width: 1023px)
  .switchSectionSeries.hover .seriesHover
    transform(scale(0.5))
@media screen and (min-width: 1024px) and (max-width: 1151px)
  .switchSectionSeries.hover .seriesHover
    transform(scale(0.61))
@media screen and (min-width: 1152px) and (max-width: 1279px)
  .switchSectionSeries.hover .seriesHover
    transform(scale(0.69))
@media screen and (min-width: 1280px) and (max-width: 1359px)
  .switchSectionSeries.hover .seriesHover
    transform(scale(0.77))
@media screen and (min-width: 1360px) and (max-width: 1439px)
  .switchSectionSeries.hover .seriesHover
    transform(scale(0.82))
@media screen and (min-width: 1440px) and (max-width: 1599px)
  .switchSectionSeries.hover .seriesHover
    transform(scale(0.87))
@media screen and (min-width: 1600px) and (max-width: 1919px)
  .switchSectionSeries.hover .seriesHover
    transform(scale(0.97))
@media screen and (min-width: 1920px)
  .switchSectionSeries.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