/* icones.css — Brick ZR : les icônes du jeu (icones.js ; skill brikz-ui). Une icône A suit la taille du texte (1,25 em) tant
   qu'on ne lui donne pas de taille ; les commandes prennent la couleur du texte (currentColor). Une grande image B garde sa taille. */

/* le sprite posé en tête de la page : caché, sans display:none (les dégradés des icônes s'y perdraient) */
#icones-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* une icône A */
.ico { display: inline-block; flex: none; vertical-align: -.26em; overflow: visible; pointer-events: none; -webkit-user-select: none; user-select: none; }
/* (:where : cette taille par défaut cède à toute règle d'un conteneur, « .city-btn .ico » par exemple) */
.ico:where(:not([width])) { width: 1.25em; height: 1.25em; }
/* des tailles toutes prêtes (16 à 48 px), quand le HTML n'en donne pas */
.ico.ico-16 { width: 16px; height: 16px; } .ico.ico-20 { width: 20px; height: 20px; } .ico.ico-24 { width: 24px; height: 24px; }
.ico.ico-28 { width: 28px; height: 28px; } .ico.ico-32 { width: 32px; height: 32px; } .ico.ico-48 { width: 48px; height: 48px; }

/* une icône devant son texte dans un bouton sans espace entre ses morceaux (.cb-btn) ; après son texte */
.ico.ico-avant { margin-right: .4em; }
.ico.ico-apres { margin-left: .3em; }

/* une coche verte, une croix rouge (ce qui est fait, ce qui manque : les maillons d'une filière, les règles du mot de passe) */
.ico.ico-oui { color: var(--vert-clair, #5fe08a); }
.ico.ico-non { color: var(--rouge-clair, #ff7a6b); }

/* une grande image B */
.ico-grande { display: block; flex: none; object-fit: contain; pointer-events: none; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }