@import "{design}/app"

$expandedHeight = 160px

img.logoImage
  display: inline-block
  height: 100%

.topBar
  height: $topBarHeight
  color: $textPrimaryColor
  background-color: $primaryBackgroundColor
  transition(all 0.5s ease)

  .brandSection
    height: 30px
    display: inline-block
    text-decoration: none

    img.logoImage
      margin: 0 5px

    .logoText
      display: inline-block
      font-family: $logoFontFamily
      font-weight: $logoFontWeight
      color: $textPrimaryColor

  .studyListLinkSection
    border-left: $uiBorderThickness solid $uiBorderColor;
    color: $textSecondaryColor
    cursor: pointer
    font-size: 13px
    font-weight: 500
    line-height: 26px
    margin-top: 3px

    &:hover
      color: $hoverColor

    &:active
      color: $activeColor

  &.studyList
    background-color: rgba(21, 25, 30, 0.7)
    height: $expandedHeight

    .brandSection
      height: 100%
      width: 80%
      padding-left: 50px
      line-height: $expandedHeight

      img.logoImage
        margin: 5px 5px 15px 5px

      .logoText
        font-size: 30px

    .studyListLinkSection
      position: absolute
      border: none
      top: 5px
      left: 5px

#worklistTabs
  height: "calc(100% - %s)" % $topBarHeight

  .tab-pane
    .viewerContainer
      .loadingTextDiv
        color: $textSecondaryColor
        font-size: 30px
        font-weight: 200

// Override Viewerbase's borders
#imageViewerViewports .viewportContainer
  border: none !important
  outline: 0 !important // Prevent blue outline in Chrome

  &:hover
  &.active
  &:hover.active
    border: none !important
    outline: 0 !important // Prevent blue outline in Chrome