/* Existing renderer names are adapters to one avatar, not independent skins. */
:is(.cox-entity-avatar, .cox-teacher-avatar, .cox-student-avatar,
    .cox-student-teacher-avatar, .cox-profile-photo-preview, .cox-file-mark) {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--cox-avatar-size, 44px);
    height: var(--cox-avatar-size, 44px);
    overflow: hidden;
    border: 1px solid rgba(237, 28, 36, .35);
    border-radius: var(--cox-avatar-radius, 8px);
    background: linear-gradient(135deg, rgba(237, 28, 36, .55), rgba(116, 0, 18, .9));
    color: var(--cox-brand-white);
    font: 900 var(--cox-avatar-text, 16px)/1 var(--cox-brand-heading);
}

:is(.cox-entity-avatar, .cox-teacher-avatar, .cox-student-avatar,
    .cox-student-teacher-avatar, .cox-profile-photo-preview, .cox-file-mark) img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cox-entity-avatar { --cox-avatar-size: 46px; --cox-avatar-radius: 50%; --cox-avatar-text: 15px; }
.cox-student-avatar { --cox-avatar-size: 92px; --cox-avatar-text: 38px; margin: 0 auto 16px; }
.cox-profile-photo-preview { --cox-avatar-size: 74px; --cox-avatar-text: 24px; }
.cox-file-mark { --cox-avatar-size: 64px; --cox-avatar-radius: 50%; --cox-avatar-text: 24px; }
.cox-teacher-avatar.is-large { --cox-avatar-size: 80px; --cox-avatar-text: 28px; }
.cox-entity-avatar strong, .cox-student-avatar span { color: inherit; font: inherit; }