/* Round 28 (UIX-6, r.397–403, 420–426): one avatar for users and organizations.
   A photo stands alone; otherwise the pattern with two initials on a scrim. */

.sc-avatar {
    --sc-avatar-size: 32px;
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: var(--sc-avatar-size);
    height: var(--sc-avatar-size);
    border-radius: var(--sc-radius-full);
    overflow: hidden;
    background-color: var(--sc-color-surface-alt);
    vertical-align: middle;
}

.sc-avatar--square { border-radius: var(--sc-radius-sm); }

.sc-avatar--xs { --sc-avatar-size: 20px; }
.sc-avatar--sm { --sc-avatar-size: 24px; }
.sc-avatar--md { --sc-avatar-size: 32px; }
.sc-avatar--lg { --sc-avatar-size: 48px; }
.sc-avatar--xl { --sc-avatar-size: 80px; }

.sc-avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sc-avatar > .sc-avatar-img {
    max-width: none;
    max-height: none;
    border-radius: 0;
}

.sc-avatar-initials {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--sc-avatar-scrim);
    color: var(--sc-color-white);
    font-family: var(--sc-font-sans);
    font-size: calc(var(--sc-avatar-size) * .4);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    user-select: none;
}