@import (reference) "colors";

@avatar-size-xs: 28px;
@avatar-size-sm: 40px;
@avatar-size: 80px;
@avatar-size-lg: 112px;

.avatarer(@size: @avatar-size) {
  height: @size;
  width: @size;
  min-width: @size;
  border-radius: 5px;
  border: 2px solid @color--white;
  display: inline-block;
  background-color: @color--white;
  background-position: center;
  background-size: cover;
  background-image: url("https://development-droprccorp.netdna-ssl.com/images/thumb_default_user.png");
  overflow: hidden;
  position: relative;
}

.avatar {
  &--xs { .avatarer(@avatar-size-xs); }
  &--sm { .avatarer(@avatar-size-sm); }
  .avatarer;
  &--lg { .avatarer(@avatar-size-lg); }
}