/*
 * Avatars.
 *
 * One class family for every picture of a person in the social pages, in three sizes. The sizes are fixed
 * rather than fluid because an avatar sits in a row of text: a picture that grows with its container drags
 * the line height around with it, and lists of people are mostly made of such rows.
 *
 * ### Why the fallback is a letter and not an icon
 *
 * A generic silhouette repeated down a list makes every strange row look the same. An initial is different
 * for most people, so a reader scanning a list of names still has something to aim at. It is decorative all
 * the same — the component marks it `aria-hidden` because the name is always printed next to it — so it is
 * never announced and never needs a contrast ratio for reading, only for not looking broken.
 *
 * The width and height are set on both axes and `object-fit` crops, because the upload is not guaranteed to
 * be square: `AvatarService` accepts what the reader gives it. Letting a portrait photograph set its own
 * aspect ratio here would push every following row down by a different amount.
 */

.avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-full);
    background-color: var(--colour-surface-sunken);
    color: var(--colour-ink-quiet);
    font-weight: var(--weight-medium);
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}

/* The border is on the picture only. A tinted circle with a letter in it already reads as an edge; adding a
   line around it as well makes a ring rather than a face. */
img.avatar--image {
    object-fit: cover;
    background-color: var(--colour-surface);
    border: var(--border-width) solid var(--colour-border);
}

.avatar--sm {
    width: 2rem;
    height: 2rem;
    font-size: var(--text-xs);
}

.avatar--md {
    width: 2.75rem;
    height: 2.75rem;
    font-size: var(--text-sm);
}

.avatar--lg {
    width: 5rem;
    height: 5rem;
    font-size: var(--text-2xl);
}