.avatar {
  --image-size: 5.625rem;

  position: relative;
  width: var(--image-size);
  height: var(--image-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar--rounded {
  border-radius: 9999px;
  overflow: hidden;
}

.avatar__preview-image {
  object-fit: contain;
  flex-grow: 0;
}

.avatar__preview-placeholder {
  --icon-color: var(--boxel-purple-200);

  overflow: visible;
  padding: var(--boxel-sp);
  background-color: var(--boxel-light-400);
}

.avatar__loading-indicator-container {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--image-size);
  height: var(--image-size);
  background-color: rgba(100, 100, 100, 0.5);
}

.avatar__loading-indicator {
  width: 100%;
  height: 100%;
  padding: var(--boxel-sp-lg);
}