@require '{ohif:viewerbase}/app'

$boxBorderColor = transparent
$boxHoverBackgroundColor = #14191E
$boxHoverBorderColor = #2d4660
$boxActiveBorderColor = #131D29
$boxWidth = 50px
$borderThickness = 2px
$boxBorderRadius = 8px
$nestingMargin = 6px
$spacerX = 7px
$spacerY = 12px

.study-browser-item
  position: relative
  // required transformation to make inner fixed elements relative to this one
  transform(scale(1))

  .loadingTextDiv
    theme('color', '$textSecondaryColor')
    background-color: $boxHoverBackgroundColor
    border-radius: 12px
    font-size: 32px
    opacity: 0
    margin: 0
    padding: 25px
    position: absolute
    pointer-events: none
    z-index: 100

  &.loading
    .loadingTextDiv
      height: 100%
      left: 0
      opacity: 0.75
      top: 0
      width: 100%

    .study-item-box
      opacity: 0.2

  &.active
    .study-item-box
      .study-modality
        theme('color', '$primaryBackgroundColor')
        &
        &:before
        &:after
          theme('background-color', '$activeColor')
          border-color: $boxActiveBorderColor

  &:not(.active) .study-browser-series
    max-height: 0 !important

    .study-series-container
      opacity: 0
      transform(translateY(-100%))

  .study-browser-series
    overflow: hidden
    transition(max-height 0.3s ease)

    .study-series-container
      opacity: 1
      transition(opacity 0.3s ease\, transform 0.3s ease)
      transform(translateY(0))
      transform-origin(50% 0%)

.study-item-box
  border: 1px solid $boxBorderColor
  border-radius: 12px
  cursor: pointer
  padding: $spacerY $spacerX ($spacerY - 1)
  position: relative
  transition($sidebarTransition)
  z-index: 0

  &:hover
    background-color: $boxHoverBackgroundColor
    border-color: $boxHoverBorderColor

    &.additional
      theme('color', '$textSecondaryColor')

  &.additional
    theme('color', '$textPrimaryColor')
    font-size: 16px
    font-weight: normal
    height: 91px
    line-height: 91px
    padding: 0
    text-align: center

  .study-text
    font-size: 13px
    left: ($spacerX * 3) + $boxWidth + ($nestingMargin * 3)
    line-height: 14px
    position: absolute
    right: $spacerX
    top: $spacerY
    .study-date
      margin-top: 8px
      theme('color', '$textSecondaryColor')
    .study-description
      margin-top: 8px
      theme('color', '$textPrimaryColor')
    .study-availability
      margin-top: 24px
      theme('color', '$textPrimaryColor')

  .study-modality
    theme('color', '$textSecondaryColor')
    font-size: 20px
    line-height: $boxWidth
    margin-left: $nestingMargin * 2
    margin-top: $nestingMargin * 2
    position: relative

    .study-modality-text
      height: 100%
      overflow: hidden
      text-align: center
      text-transform: uppercase

    &
    &:before
    &:after
      theme('border', '%s solid $primaryBackgroundColor' % $borderThickness)
      theme('background-color', '$boxBackgroundColor')
      border-radius: $boxBorderRadius
      height: $boxWidth + ($borderThickness * 2)
      transition($sidebarTransition)
      width: $boxWidth + ($borderThickness * 2)

    &:before
    &:after
      display: block
      content: ''
      position: absolute

    &:before
      top: -($borderThickness + $nestingMargin)
      left: -($borderThickness + $nestingMargin)
      z-index: -1

    &:after
      top: -($borderThickness + ($nestingMargin * 2))
      left: -($borderThickness + ($nestingMargin * 2))
      z-index: -2