:host {
  background-color: var(--default-shade);
  border-radius: 100%;
  display: block;
  height: var(--avatar-normal);
  min-height: var(--avatar-normal);
  min-width: var(--avatar-normal);
  overflow: hidden;
  width: var(--avatar-normal);
}

img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

:host(.small) {
  height: var(--avatar-small);
  min-height: var(--avatar-small);
  min-width: var(--avatar-small);
  width: var(--avatar-small);
}

:host(.large) {
  height: var(--avatar-large);
  min-height: var(--avatar-large);
  min-width: var(--avatar-large);
  width: var(--avatar-large);
}