:host {
  display: flex;
  aspect-ratio: 1/1;

  .avatar {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    overflow-clip-margin: unset;
  }

  .empty-avatar-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    aspect-ratio: 1 / 1;

    color: var(--color-gray-fff);

    background-color: var(--color-gray-aaa);
    border-radius: 100%;

    .icon {
      transform: scale(0.6);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}