/* Pastille d'identité — modèle canonique ; son emploi : canon_avatar.md. */

@layer components {
    .avatar {
        position: relative;
        display: inline-flex;
        flex: none;
        width: var(--avatar-size, 28px);
        height: var(--avatar-size, 28px);
        overflow: hidden;
    }
    .avatar-initials {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .avatar-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: var(--avatar-fit, cover);
    }

    .avatar {
        border-radius: var(--avatar-radius, var(--canon-radius-pill));
        background-color: var(--avatar-surface, var(--canon-theme-raised));
    }
    .avatar-image {
        background-color: var(--avatar-image-surface, transparent);
    }

    .avatar {
        vertical-align: middle;
        line-height: 1;
    }
    .avatar-initials {
        font-size: var(--avatar-initials-size, var(--canon-size-fine));
        font-weight: var(--canon-weight-emphasis);
        letter-spacing: 0.02em;
        color: var(--avatar-ink, var(--canon-theme-on-action));
    }
}

/* Part locale — les réglages que l'app pose sur cet objet, contexte par contexte. */

@layer components {
    /* La pastille du profil : grande, à la teinte d'identité du hub, en tête du nom qu'elle figure. */
    .account-avatar {
        --avatar-size: 70px;
        --avatar-surface: var(--local-color-identity-action);
        --avatar-initials-size: var(--local-size-account-span);
    }
}