@import "{design}/app"

$iconMargin = 5px
$iconWidth = 16px
$iconHeight = 16px

#userAccountMenu
  padding: 4px 0
  height: 100%

  .dropdown-toggle
    theme('color', '$defaultColor')
    cursor: pointer
    font-size: 13px
    font-weight: 400
    line-height: 18px
    text-decoration: none

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

  ul.dropdown-menu
    li
      cursor: pointer
      
      svg
        margin-right: $iconMargin
        width: $iconWidth
        height: $iconHeight
        text-align: center
        
      svg
        display: inline-block
        vertical-align: middle
        
        &.server
          width: $iconWidth - 3
          height: $iconWidth - 3
          margin-right: $iconMargin + 2
          margin-left: 1px
          
        &.theme
          width: $iconWidth + 2
          height: $iconWidth + 2
          margin-right: $iconMargin - 2
          
        &.study-list
          width: $iconWidth + 2
          height: $iconWidth + 2
          margin-right: $iconMargin - 2