.avatar {
  vertical-align: middle;
  &--xsmall {
    width: 16px;
    height: 16px;
  }
  &--small {
    width: 24px;
    height: 24px;
  }
  &--medium {
    width: 32px;
    height: 32px;
  }
  &--default {
    width: 48px;
    height: 48px;
  }
  &--large {
    width: 64px;
    height: 64px;
  }
  &--xlarge {
    width: 128px;
    height: 128px;
  }
  &--contain {
    object-fit: contain;
  }
  &--cover {
    object-fit: cover;
  }
}

// Supported in all evergreen browsers as long as
// object-fit is used on an <img>; https://caniuse.com/#search=object-fit
img.img--contain { object-fit: contain; }
img.img--cover { object-fit: cover; }