/* =============================================================
   sm/lib_css/sm_avatar.css - avatar degli utenti (header, profilo, scheda utente, modale di scelta).

   Tre forme dallo stesso contenitore .sm-avatar: foto (img), iniziali, icona del mestiere (maschera SVG
   Lucide da sm/assets/media/lucide/, prende il colore del tono). Toni: token --brand-avatar-* di
   sm/variabili.php. Helper: sm/lib_php/utenti/avatar.php e sm/lib_scripts/sm_avatar.js.
   ============================================================= */

.sm-avatar {
    --sm-avatar-size: 36px;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--sm-avatar-size);
    height: var(--sm-avatar-size);
    border-radius: 50%;
    overflow: hidden;
    font-size: calc(var(--sm-avatar-size) * 0.38);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    user-select: none;
    background: var(--sm-avatar-bg);
    color: var(--sm-avatar-fg);
}
.sm-avatar.is-foto { background: var(--brand-shell); }
.sm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-avatar-ico {
    display: block;
    width: 56%;
    height: 56%;
    background-color: currentColor;
    -webkit-mask: var(--sm-avatar-ico) center / contain no-repeat;
            mask: var(--sm-avatar-ico) center / contain no-repeat;
}

/* Misure */
.sm-avatar-sm { --sm-avatar-size: 30px; }
.sm-avatar-md { --sm-avatar-size: 44px; }
.sm-avatar-lg { --sm-avatar-size: 48px; }
.sm-avatar-xl { --sm-avatar-size: 96px; }
@media (min-width: 992px) { .sm-avatar-header { --sm-avatar-size: 40px; } }

/* Toni */
.sm-avatar-rosso      { --sm-avatar-bg: var(--brand-avatar-rosso-bg);      --sm-avatar-fg: var(--brand-avatar-rosso-fg); }
.sm-avatar-ardesia    { --sm-avatar-bg: var(--brand-avatar-ardesia-bg);    --sm-avatar-fg: var(--brand-avatar-ardesia-fg); }
.sm-avatar-acciaio    { --sm-avatar-bg: var(--brand-avatar-acciaio-bg);    --sm-avatar-fg: var(--brand-avatar-acciaio-fg); }
.sm-avatar-salvia     { --sm-avatar-bg: var(--brand-avatar-salvia-bg);     --sm-avatar-fg: var(--brand-avatar-salvia-fg); }
.sm-avatar-sabbia     { --sm-avatar-bg: var(--brand-avatar-sabbia-bg);     --sm-avatar-fg: var(--brand-avatar-sabbia-fg); }
.sm-avatar-prugna     { --sm-avatar-bg: var(--brand-avatar-prugna-bg);     --sm-avatar-fg: var(--brand-avatar-prugna-fg); }
.sm-avatar-petrolio   { --sm-avatar-bg: var(--brand-avatar-petrolio-bg);   --sm-avatar-fg: var(--brand-avatar-petrolio-fg); }
.sm-avatar-inchiostro { --sm-avatar-bg: var(--brand-avatar-inchiostro-bg); --sm-avatar-fg: var(--brand-avatar-inchiostro-fg); }

/* Header: l'avatar sta nel trigger del menu utente */
.sm-avatar-trigger { display: inline-flex; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.sm-avatar-trigger[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--brand-surface), 0 0 0 4px var(--brand-primary); }
.sm-avatar-trigger:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }