@import "{design}/app"

$expandedHeight = 160px

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

  .brandSection
    height: 100%
    display: inline-block

    img.logoImage
      display: inline-block
      height: 100%
      max-height: 50px
      margin: 0 5px

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

  .studyListLinkSection
    color: $textSecondaryColor
    border-left: $uiBorderThickness solid $uiBorderColor;
    font-weight: 400
    font-size: 13px
    line-height: 30px
    padding: 0 10px
    margin: 0 10px
    cursor: pointer

    &:hover
      color: $hoverColor

    &:active
      color: $activeColor

  .userAccountSection
     margin: 0 10px

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

    .brandSection
      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

// 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