$this = merge(
  {
    avatarSizes: {
      s: 4u,
      m: 5u,
      l: 6u,
    },
    statusSizes: {
      s: 1.25u,
      m: 1.5u,
      l: 1.75u,
    },
    fallbackSizes: {
      s: 1.5u,
      m: 1.75u,
      l: 2u,
    }
  },
  $UI.Avatar,
  true
)

_white = $UI.colors.white

.root
  +web()
    user-select none

.avatarWrapper
  height 100%
  overflow hidden

.avatar
  justify-content center
  align-items center
  height 100%

.fallback
  color white

.status
  position absolute
  z-index 1
  border 2px solid _white
  radius(circle)

  &.circle
    right 0
    bottom 0

  &.squared
  &.rounded
    bottom -0.25u
    right @bottom

  &.online
    background-color $UI.colors.success

  &.away
    background-color $UI.colors.warning

:export
  config: $this