.avatar
  position: relative
  width: 3em
  height: 3em
  margin: 0
  generateSizes()

  &:not(:first-child)
  &:not(:last-child)
    margin: 0

  img
    display: block
    border-radius: 10em
    margin: 0
    width: 100%
    height: 100%
    object-fit: cover

.avatar-initials
  border-radius: 10em
  display: block
  line-height: 3
  text-align: center
  background-color: $primary
  color: $white
  font-weight: $font-weight-semi-bold

.avatar-icon
  position: absolute
  bottom: 3%
  right: 3%
  display: block
  border-radius: 10em
  width: 0.75em
  height: 0.75em
  border: 2px solid $white
  background: $gray
  // generate color modifiers
  for color in $modifiers-color
    $accent = lookup('$' + color)
    &.is-{color}
      background: $accent