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

.studyBrowseItem  
  margin-bottom: 10px;
  position: relative
  // required transformation to make inner fixed elements relative to this one
  transform: scale(1)

  &.active
    .studyItemBox
      border-color: var(--active-color)

      .studyModality
        color: var(--primary-background-color)
        &
        &:before
        &:after
          background-color: var(--active-color)
          border-color: $boxActiveBorderColor

  &:not(.active) .studyBrowserSeries
    max-height: 0 !important

    .studySeriesContainer
      opacity: 0
      transform: translateY(-100%)

  .studyBrowserSeries
    overflow: hidden
    transition: max-height 0.3s ease

    .studySeriesContainer
      opacity: 1
      transition: opacity 0.3s ease, transform 0.3s ease
      transform: translateY(0)
      transform-origin: 50% 0%

.studyItemBox
  border: 3px solid var(--ui-border-color-dark)
  border-radius: 12px
  cursor: pointer
  padding: $spacerY $spacerX ($spacerY - 1)
  position: relative
  transition: $sidebarTransition
  background-color: $boxHoverBackgroundColor
  z-index: 0

  &:hover
    border-color: var(--active-color)

    &.additional
      color: var(--text-secondary-color)
    
    .studyModality
      color: var(--primary-background-color)
      &
      &:before
      &:after
        background-color: var(--active-color)

  &.additional
    color: var(--text-primary-color)
    font-size: 16px
    font-weight: normal
    height: 91px
    line-height: 91px
    padding: 0
    text-align: center

  .studyText
    font-size: 13px
    left: ($spacerX * 3) + $boxWidth + ($nestingMargin * 3)
    line-height: 14px
    position: absolute
    right: $spacerX
    top: $spacerY
    .studyDate
      margin-top: 8px
      color: var(--text-secondary-color)
    .studyDescription
      margin-top: 8px
      color: var(--text-primary-color)
    .studyAvailability
      margin-top: 24px
      color: var(--text-primary-color)

  .studyModality
    color: var(--text-secondary-color)
    font-size: 20px
    line-height: $boxWidth
    margin-left: $nestingMargin * 2
    margin-top: $nestingMargin * 2
    position: relative

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

    &
    &:before
    &:after
      border: $borderThickness solid var(--primary-background-color)
      background-color: var(--box-background-color)
      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