/* SEMNELE DE PE BUTOANE
   --------------------
   Culorile stau AICI, ca variabile, nu in desenul SVG: unealta care face tema
   de noapte citeste CSS, deci le poate intoarce. O culoare scrisa ca atribut de
   SVG i-ar fi invizibila si ar ramane inchisa pe fundal inchis, pe veci.
   Toate patru trec pragul de contrast si pe alb, si pe butonul deschis. */
:root{--semn-verde:var(--wf-verde-40);--semn-rosu:var(--wf-rosu-40b);--semn-chihlimbar:var(--wf-chihlimbar-47);--semn-albastru:var(--wf-albastru-42);--semn-neutru:var(--wf-cenusiu-35)}
.semn-verde{--semn-culoare:var(--semn-verde)}
.semn-rosu{--semn-culoare:var(--semn-rosu)}
.semn-chihlimbar{--semn-culoare:var(--semn-chihlimbar)}
.semn-albastru{--semn-culoare:var(--semn-albastru)}
.semn-neutru{--semn-culoare:var(--semn-neutru)}

/* Douazeci de pixeli, nu unsprezece. Legat de marimea scrisului cum era inainte,
   semnul iesea de 11px pe butoanele mici: o bulina, nu un desen. In hala, cu
   praf si lumina tare, de la un pas nu se vedea nimic. */
/* MASURA SEMNULUI NU TINE DE LOCUL LUI.
   Regula de mai jos o avea numai pe butoane. Pus intr-un rand obisnuit - „Adus
   din stoc dupa aviz", o banda de eroare - acelasi desen n-avea nicio masura,
   iar un SVG fara masura se intinde cat il tine parintele: o bifa verde cat
   toata pagina, peste comanda. Deci masura sta pe semn, oriunde ar fi el. */
.semn{width:20px;height:20px;flex:none}
button .semn,.button .semn{width:20px;height:20px;margin-right:.45em;flex:none}
.semn .placa{fill:var(--semn-culoare)}
.semn .fata{fill:var(--wf-alb)}
/* SEMNUL FARA PASTILA isi ia el culoarea.
   Sagetile de rasfoire si de desfasurare stau pe butoane care au deja fundalul
   lor; o pastila peste el ar arata a buton in buton. Fara regula asta desenul
   ar ramane alb - adica nevazut pe un buton deschis. */
.semn-gol .fata{fill:var(--semn-culoare)}
.semn-gol .placa{fill:none}

/* Pe un buton PLIN, colorat, rolurile trebuie rasturnate: pastila devine alba,
   desenul ia culoarea. Fara asta, un cos rosu pus pe un buton rosu ar fi un cos
   invizibil. Se cere ANUME, cu clasa "pe-plin", nu se ghiceste dupa alte clase:
   incercarea de a ghici racea placa alba tocmai pe butoanele deschise, unde
   trebuia sa fie colorata. */
button.pe-plin .semn .placa,.button.pe-plin .semn .placa{fill:var(--wf-alb)}
button.pe-plin .semn .fata,.button.pe-plin .semn .fata{fill:var(--semn-culoare)}


/* Butonul cu semn isi aseaza continutul pe o linie, altfel desenul si cuvantul
   se calca. Merge si pe legaturile <a class="button">, care nu sunt butoane. */
button:has(.semn),.button:has(.semn){display:inline-flex;align-items:center}