.avatar {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background: $color-border-light no-repeat center/cover;
  border-radius: $border-radius;
  vertical-align: bottom;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}

.avatar-rounded {
  border-radius: 50%;
}

.avatar-sm {
  width: 1.5rem;
  height: 1.5rem;
}

.avatar-lg {
  width: 3rem;
  height: 3rem;
}

.avatar-xl {
  width: 5rem;
  height: 5rem;
}