@import "{design}/app"

$expandedHeight = 160px

.logoImage
  display: inline-block
  height: 100%
  float: left

.topBar
  height: $topBarHeight
  padding: 10px 10px 0
  theme('color', '$textPrimaryColor')
  theme('background-color', '$primaryBackgroundColor')
  transition(all 0.5s ease)

  &>.clearfix
    position: relative

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

    .logoImage
      margin: 0 8px 0 0
      width: 30px

    .logoText
      display: inline-block
      font-family: $logoFontFamily
      font-weight: $logoFontWeight
      theme('color', '$textPrimaryColor')
      line-height: 30px

  .studyListLinkSection
    theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
    margin: 3px 0 0 10px
    padding: 0 0 0 10px
    
    &#back-to-viewer-btn
      border-left: 0

  .btn
    theme('color', '$textSecondaryColor')
    cursor: pointer
    font-size: 13px
    font-weight: 500
    line-height: 26px

    &:hover
      theme('color', '$hoverColor')

    &:active
      theme('color', '$activeColor')

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

    .brandSection
      height: 100%
      width: 80%
      line-height: $expandedHeight - 10px

      .logoImage
        width: 50px
        margin: 0 20px 0 0

      .logoText
        font-size: 30px

    .studyListLinkSection
      border: none
      left: 0
      margin: 0
      padding: 0
      position: absolute
      top: 0

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

  .tab-pane
    .viewerContainer
      .loadingTextDiv
        theme('color', '$textSecondaryColor')
        font-size: 30px