@import "{design}/app"

.viewerSection
  display: inline-flex
  flex-flow: row nowrap
  align-items: stretch
  height: 'calc(100% - %s)' % $toolbarHeight
  width: 100%

  .sidebarMenu
    background: $primaryBackgroundColor
    height: 100%
    position: absolute
    transition($sidebarTransition)
    z-index: 1

  .sidebar-left
    width: $studiesSidebarMenuWidth
    order: 1
    flex: 0
    left: - $studiesSidebarMenuWidth
    border-right: $uiBorderThickness $uiBorderColor solid

    &.sidebar-open
      left: 0

  .mainContent
    order: 2
    width: 100%
    height: 100%
    -webkit-transition: $sidebarTransition
    -ms-transition: $sidebarTransition
    -o-transition: $sidebarTransition
    -moz-transition: $sidebarTransition
    transition: $sidebarTransition
    transform: translate3d(0, 0, 0)

    &.sidebar-left-open.sidebar-right-open
      width: 'calc(100% - %s)' % ($studiesSidebarMenuWidth + $lesionsSidebarMenuWidth)

    &.sidebar-right-open
      width: 'calc(100% - %s)' % $lesionsSidebarMenuWidth

    &.sidebar-left-open
      width: 'calc(100% - %s)' % $studiesSidebarMenuWidth

    &.sidebar-left-open
      transform: translate3d($studiesSidebarMenuWidth, 0, 0)

  .sidebar-right
    flex: 0
    order: 3
    padding-left: 6px
    right: - $lesionsSidebarMenuWidth
    width: $lesionsSidebarMenuWidth

    &:before
      background-color: $uiBorderColor
      content: ''
      display: block
      height: 100%
      left: 5px
      position: absolute
      top: 0
      width: $uiBorderThickness

    &.sidebar-open
      right: 0

  .studiesListedChanger
    padding: 20px 10px
    text-align: center
    border-bottom: $uiBorderThickness $uiBorderColor solid