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

    aspect-ratio: 1;
    block-size: var(--avatar-size, var(--avatar-size-default));
    border-radius: var(--avatar-border-radius);
    display: grid;
    flex-shrink: 0;
    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;
  }
}

/* A person shown inline (person_tag): their avatar in place of their name, which is the tooltip.
   Sized to the text around it, so it sits in a line of metadata or a sentence. */
@layer components {
  .person {
    display: inline-flex;
    inline-size: 1.6em;
    block-size: 1.6em;
    flex-shrink: 0;
    vertical-align: middle;
  }

  .person--large {
    inline-size: 2em;
    block-size: 2em;
  }

  .person__avatar {
    block-size: 100%;
    border-radius: 50%;
    inline-size: 100%;
  }
}

/* A client's contacts (contact_stack): circles of initials, overlapping, each ringed in the
/* canvas colour so the overlap reads. Contacts have no pictures; the colours are the staff
/* avatars' (User::Avatar::AVATAR_COLORS), so both kinds of people look alike. */
@layer components {
  .contact-stack {
    align-items: center;
    display: inline-flex;
    vertical-align: middle;

    > * + * {
      margin-inline-start: -0.15rem;
    }
  }

  .contact-avatar,
  .contact-stack__more {
    block-size: 1.6rem;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-canvas);
    display: inline-grid;
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 600;
    inline-size: 1.6rem;
    letter-spacing: 0;
    line-height: 1;
    place-items: center;
  }

  .contact-avatar {
    color: var(--color-white);
  }

  .contact-stack__more {
    background-color: var(--color-ink-lightest);
    color: var(--color-ink-dark);
  }

  .contact-avatar--1 { background-color: #AF2E1B; }
  .contact-avatar--2 { background-color: #CC6324; }
  .contact-avatar--3 { background-color: #3B4B59; }
  .contact-avatar--4 { background-color: #BFA07A; }
  .contact-avatar--5 { background-color: #ED8008; }
  .contact-avatar--6 { background-color: #ED3F1C; }
  .contact-avatar--7 { background-color: #BF1B1B; }
  .contact-avatar--8 { background-color: #736B1E; }
  .contact-avatar--9 { background-color: #D07B53; }
  .contact-avatar--10 { background-color: #736356; }
  .contact-avatar--11 { background-color: #AD1D1D; }
  .contact-avatar--12 { background-color: #BF7C2A; }
  .contact-avatar--13 { background-color: #C09C6F; }
  .contact-avatar--14 { background-color: #698F9C; }
  .contact-avatar--15 { background-color: #7C956B; }
  .contact-avatar--16 { background-color: #5D618F; }
  .contact-avatar--17 { background-color: #3B3633; }
  .contact-avatar--18 { background-color: #67695E; }
}

/* Everyone on a piece of work (todo_owners_tag, todos/_owners): staff avatars overlapping like a
/* client's contacts, the lead first and on top. */
@layer components {
  .owner-stack {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    vertical-align: middle;

    > * + * {
      margin-inline-start: -0.35rem;
    }

    > :first-child {
      position: relative;
      z-index: 1;
    }

    .person__avatar,
    .owner-picker__avatar {
      box-shadow: 0 0 0 2px var(--color-canvas);
    }
  }

  .owner-stack__more {
    background-color: var(--color-ink-lightest);
    block-size: 1.6rem;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-canvas);
    color: var(--color-ink-dark);
    display: inline-grid;
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 600;
    inline-size: 1.6rem;
    place-items: center;
  }

  .owner-picker__hint {
    padding-inline: var(--inline-space);
  }
}

/* The edit page's "Also on it": the team as toggles, picked ones in the selection colour. */
@layer components {
  .owner-checklist {
    border: 0;
    margin: 0;
    padding: 0;

    legend {
      margin-block-end: var(--block-space-half);
      padding: 0;
    }
  }

  .owner-checklist__person {
    align-items: center;
    border: 1px solid var(--color-ink-lighter);
    border-radius: var(--radius-control);
    cursor: pointer;
    display: inline-flex;
    gap: var(--inline-space);
    padding: calc(var(--block-space-half) / 2) var(--inline-space);

    &:has(:checked) {
      background: var(--color-selected);
      border-color: var(--color-link);
    }
  }
}