@layer components {
  /* A user's square photo, sized in rem so initials can be sized against it */
  .avatar {
    --avatar-size: 2rem;

    block-size: var(--avatar-size);
    display: inline-grid;
    flex-shrink: 0;
    inline-size: var(--avatar-size);
    object-fit: cover;
    place-items: center;
  }

  .avatar--initials {
    background-color: var(--color-ink-lighter);
    color: var(--color-ink-darker);
    font-size: calc(var(--avatar-size) * 0.4);
    font-weight: 700;
    line-height: 1;
    user-select: none;
  }

  /* The size of an icon in a button, to line up with icons beside it */
  .avatar--small {
    --avatar-size: 1.3rem;
  }

  .avatar--large {
    --avatar-size: 8rem;
  }

  /* The photo, or a placeholder without one, opens the file chooser */
  .avatar-picker {
    cursor: pointer;
    display: block;

    @media (any-hover: hover) {
      &:hover .avatar-picker__placeholder {
        border-color: var(--color-ink-medium);
      }
    }

    &:has(:focus-visible) {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .avatar-picker__placeholder {
    --icon-size: 2rem;

    border: 1px dashed var(--color-ink-light);

    .icon {
      opacity: 0.5;
    }
  }
}