$avatar-size-sm: 1.5rem;
$avatar-size: 2rem;
$avatar-size-lg: 2.5rem;
$avatar-size-xl: 3rem;
$avatar-size-2xl: 4rem;

.avatar {
  --size: #{$avatar-size};

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  line-height: var(--size);
  border-radius: 50%;
  background: $light-gray-1;
  position: relative;
  color: $dark-gray-3;
  font-weight: 500;
  vertical-align: bottom;
  font-size: calc(var(--size)/2.2);
  user-select: none;
  background-size: cover;
  background-position: 50% 50%;
  overflow: hidden;

  img {
    object-fit: cover;
    height: var(--size);
    width: var(--size);
  }

  &.avatar--sm {
    --size: #{$avatar-size-sm};
  }

  &.avatar--lg {
    --size: #{$avatar-size-lg};
  }

  &.avatar--xl {
    --size: #{$avatar-size-xl};
  }

  &.avatar--2xl {
    --size: #{$avatar-size-2xl};
  }

  &.avatar--blue {
    background-color: #c8d9f1;
    color: #467fcf;
  }

  &.avatar--azure {
    background-color: #c7e6fb;
    color: #45aaf2;
  }

  &.avatar--indigo {
    background-color: #d1d5f0;
    color: #6574cd;
  }

  &.avatar--purple {
    background-color: #e4cff9;
    color: #a55eea;
  }

  &.avatar--pink {
    background-color: #fcd3e1;
    color: #f66d9b;
  }

  &.avatar--red {
    background-color: #f0bcbc;
    color: #cd201f;
  }

  &.avatar--orange {
    background-color: #fee0c7;
    color: #fd9644;
  }

  &.avatar--yellow {
    background-color: #fbedb7;
    color: #f1c40f;
  }

  &.avatar--lime {
    background-color: #d7f2c2;
    color: #7bd235;
  }

  &.avatar--green {
    background-color: #cfeab3;
    color: #5eba00;
  }

  &.avatar--teal {
    background-color: #bfefea;
    color: #2bcbba;
  }

  &.avatar--cyan {
    background-color: #b9e3ea;
    color: #17a2b8;
  }

  &.avatar--gray-dark {
    background-color: #c2c4c6;
    color: #343a40;
  }
}