@layer components {
  .avatar {
    --radius: var(--rounded-full);
    --size: var(--avatar-size, var(--size-10));

    block-size: var(--size);
    border-radius: var(--radius);
    display: flex;
    flex-shrink: 0;
    inline-size: var(--size);
    overflow: hidden;

    &.btn {
      --btn-inline-size: var(--size);
      --btn-padding: 0;
      --btn-radius: var(--radius);
    }

    &.btn:hover {
      filter: var(--brightness-90);
    }

    img {
      aspect-ratio: var(--aspect-square);
      block-size: var(--size-full);
      inline-size: var(--size-full);
      object-fit: cover;
    }

    span[role="img"] {
      align-items: center;
      background-color: var(--color-border-light);
      block-size: var(--size-full);
      border-radius: var(--radius);
      display: flex;
      font-size: calc(var(--size) * .4);
      inline-size: var(--size-full);
      justify-content: center;
      user-select: none;
    }
  }

  .avatar-group {
    align-items: center;
    display: flex;

    > :not(:last-child) {
      margin-inline-end: calc(var(--size-2) * -1);
    }
  }
}