@import '../_variables'
@import '../_mixins'

#topbar

  #me
    display: none
    position: fixed
    right: 0
    padding: 8px 5px 5px 5px
    width: 175px

  .avatar
    float:right
    width: 35px
    height: 35px
    background: rgba(0,0,0,0)
    background-color: transparent
    vertical-align: middle
    margin: 3px 0.5rem 0px 0px;

  .name,
  .status
    display: block
    width: 120px
    overflow: hidden
    text-overflow: ellipsis
    text-align: right

  .name
    color: $gray-dark
    font-size: $font-size-large
    font-weight: $font-weight-bolder

  .status
    color: $gray
    font-weight: normal
    font-size: $font-size-base
    line-height: $font-size-base
    border-width: 0px
    margin: 0px
    padding: 0px
    line-height: 18px
    height: 18px
    white-space: nowrap
    transition: all .25s
    allowselect()

    &:focus
      border-radius: 0.25rem
      border: 1px solid $gray
      outline: none
      padding: 2px

    &:empty:before
      content: 'Update your status'

    &:before,
    &:empty:focus:before
      content: ''

  &.connected
    #me
      display: block