@require "{ohif:design}/app"

body>.header

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

    .logo-image
      display: inline-block
      fill: transparent
      float: left
      height: 100%
      margin: 0 8px 0 0
      width: 30px

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

  .header-menu
    .user-name
      font-size: 13px

    .menu-toggle
      theme('border-left', 'solid 1px $defaultColor')
      display: inline-block
      height: 18px
      padding: 0 8px

      .fa
        theme('color', '$defaultColor')
        font-size: 17px
        line-height: 18px

      .caret-down
        theme('color', '$uiGrayLight')
        margin: 0 4px 4px 2px

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

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

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

  .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

  &.header-big
    padding-left: $studyListPadding
    padding-right: $studyListPadding

    .brand
      height: 100%
      width: 80%
      line-height: $topBarExpandedHeight - 10px

      .logo-image
        margin: 0 20px 0 0
        width: 50px

      .logo-text
        font-size: 30px

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