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

#menu
  position: fixed
  top: 0px
  bottom: 0px
  left: 0px
  width: 180px
  background-color: $sidebarBg
  z-index: 300
  overflow-y: auto;
  overflow-x: hidden;
  webkit-transition-fix()
  noselect()

  .main
    li
      list-style-type: none
      margin: 10px 0 5px 0
      text-align: center

      &:last-child
        margin: 0

      svg
        position: absolute
        top: 50%
        left: 10px
        margin-top: -13px
        fill: white

      a
        position: relative
        width: 130px

      .button
        background: $sidebarButton

        &:hover
          background: lighten($sidebarButton, 10%)

  h1
    font-size: $fontSmall
    margin: 0
    padding: 10px
    color: white
    text-transform: uppercase

#roster,
#bookmarks
  li
    list-style-type: none
    padding: 7px 10px
    margin: 0px
    position: relative
    min-height: 15px
    font-size: $fontSmall
    color: #fff
    cursor: pointer
    transition: all .3s ease-in 0
    -webkit-transition: all .3s ease-in 0
    -moz-transition: all .3s ease-in 0

    &:hover
      background: $activeBlue

    &.hasUnread .unread
      display: block

    &.online,
    &.chat
      border-left: 3px solid #427a00

    &.dnd
      border-left: 3px solid #c50041

    &.away,
    &.xa
      border-left: 3px solid #f57900

    &.offline
      border-left: none

    &.offline:not(:hover)
      .name
        color: darken($textSecondary, 40%)

      img
        opacity: .25

      .status
        color: #777

    &.activeContact, &.offline.activeContact
      background: white
      font-weight: bold

      .name
        color: $baseText

    &.composing, &.paused

      &:after
        content: ''
        position: absolute
        top: 50%
        right: 10px
        height: 8px
        width: 8px
        margin-top: -4px
        roundall(10px)
        animation: pulsate 1.5s infinite ease-in

    &.composing
      &:after
        background: #f57900

    &.paused
      &:after
        background: $textSecondary

    img
      opacity: 1

    .avatar
      vertical-align: top
      margin-right: 5px
      margin-top: -10px
      position: absolute
      left: 10px
      top: 50%
      avatarSmall()
      noselect()

    .name
      margin-left: 30px
      line-height: 20px
      color: white
      text-overflow: ellipsis
      overflow: hidden
      width: 70%

    .status
      color: $textSecondary
      font-size: $fontSmall-2px
      margin: 0
      margin-left: 30px

      &:not(:empty)
        margin-top: -5px

    .unread
      display: none
      color: white
      padding: 0 5px
      roundall(20px)
      position: absolute
      top: 10px
      right: 15px
      text-align: center
      font-weight: bold
      background: $activeBlue

@keyframes pulsate
  0%
    opacity: 1.0
  50%
    opacity: 0.5
  100%
    opacity: 1.0