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

#me
  position: fixed
  left: 200px
  top: 0px
  height: 40px
  width: 100%
  background-color: #fff
  border-bottom: 1px solid darken($gray-lighter, 10%)
  z-index: 100
  noselect()
  color: #fff

  .avatar
    width: 30px
    height: 30px
    vertical-align: middle
    margin-right: 5px
    roundall(15px)

  h1
    font-size: 13px
    line-height: 12px
    margin: 5px
    padding: 0px
    white-space: nowrap
    max-width: 75%

  .status
    font-weight: normal
    font-size: 12px
    line-height: 12px
    border-width: 0px
    margin: 0px
    padding: 0px
    line-height: 20px
    height: 20px

    max-width: 75%
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis

    transition: all .25s

    &:before
      content: '-'
      padding-left: 5px
      padding-right: 5px

    &:empty
      font-style: italic

      &:before
        content: '- Update your status'

  .name,
  .status
    &:focus
      background-color: #fffcea
      border: 1px solid #efe391
      color: #d2bd2d