@layer components {
  .avatar {
    aspect-ratio: 1;
    background-color: var(--color-canvas);
    border-radius: var(--border-radius, 50%);
    object-fit: cover;
  }

  .avatar-stack {
    --border-color: var(--color-body);
    display: flex;
    align-items: center;
    justify-content: center;

    .avatar {
      border: 2px solid var(--border-color);

      &:not(:first-of-type) {
        margin-inline-start: -1ch;
      }
    }
  }

  .avatar-badge {
    position: absolute;
    inset: 0.5ch -1ch auto auto;
  }
}