@layer components {
  .avatar {
    --avatar-border-radius: 50%;
    --avatar-size-default: 5ch;
    --btn-border-size: 0;

    /* Pass one --accent-color in and the background, text, and border are all
       derived from it. Because the mix targets --color-surface and --color-ink,
       these re-derive for dark mode on their own. */
    --avatar-bg: color-mix(in srgb, var(--accent-color, var(--color-ink-medium)) 14%, var(--color-surface));
    --avatar-fg: color-mix(in srgb, var(--accent-color, var(--color-ink-medium)) 78%, var(--color-ink));
    --avatar-border: color-mix(in srgb, var(--accent-color, var(--color-ink-medium)) 35%, transparent);

    aspect-ratio: 1;
    background-color: var(--avatar-bg);
    block-size: var(--avatar-size, var(--avatar-size-default));
    border: 1px solid var(--avatar-border);
    border-radius: var(--avatar-border-radius);
    color: var(--avatar-fg);
    display: grid;
    flex-shrink: 0;
    font-weight: 600;
    inline-size: var(--avatar-size, var(--avatar-size-default));
    margin: 0;
    place-items: center;

    :is(img, .icon) {
      aspect-ratio: 1;
      block-size: 100%;
      border-radius: var(--avatar-border-radius);
      grid-area: 1/1;
      inline-size: 100%;
      max-inline-size: 100%;
      object-fit: cover;
    }
  }

  .avatar__form {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
}