@mixin avatar($size, $border-size, $space)
  width: $size
  height: $size
  display: inline-block
  vertical-align: top
  border: $border-size solid transparent
  border-radius: $size
  &.user-offline
    border: $border-size solid $menu-border-color
  &.user-online
    border: $border-size solid $brand-success
  &.media-notification
    border: $border-size solid $brand-warning
  &.media-empty span
    display: block
    text-align: center
    line-height: $size - ($border-size + $space) * 2
    color: white

  .media-round
    width: $size - $border-size * 2
    height: $size - $border-size * 2
    border: $space solid transparent
    border-radius: $size - $border-size * 2
    overflow: hidden
    position: relative

    img
      width: 100%
      min-width: 100%
      min-height: 100%
      vertical-align: top

  .filter
    display: none
    &.active
      width: 100%
      max-width: 100%
      height: 100%
      min-height: 100%
      max-height: 100%
      display: block
      position: absolute
      top: 0
      left: 0
      text-align: center
      line-height: $size - $border-size * 2 - $space *2
      @include transparent($brand-warning, 0.7)
      color: white
      border-radius: 50%