/**
 * Fichier : abs-icones.css
 * Emplacement : assets/css/
 *
 * Mécanique des emplacements d'icônes posés par ABS_Icones. L'extension ne
 * fournit aucune icône : une extension de design les déclare en CSS seul,
 * par des variables.
 *
 * Variables :
 *   --abs-icone-taille   côté de l'icône ; 0 par défaut, rien ne paraît.
 *   --abs-icone-ecart    espace entre l'icône et le libellé ; 0 par défaut.
 *   --abs-icone-{cle}    image de l'icône, sous la forme url(...).
 *
 * Chaque emplacement porte dans son attribut style la variable --abs-icone,
 * qui lit l'icône de sa clé la plus précise, puis celle de sa clé générale :
 * un lien « PDF » lit --abs-icone-telecharger-pdf, puis
 * --abs-icone-telecharger.
 *
 * Exemple, dans la feuille d'une extension de design :
 *   .abs-releves-menu { --abs-icone-taille: 1.25em; --abs-icone-ecart: 0.5em; }
 *   :root { --abs-icone-section-studio: url( "icones/studio.svg" ); }
 *
 * Une taille donnée à un groupe (le menu, par exemple) ne fait paraître
 * que les emplacements dont une clé a une image. Les autres restent nuls,
 * quelle que soit l'unité : leur attribut style borne leur largeur et leur
 * hauteur à 0 tant qu'aucune de leurs clés n'a d'image.
 *
 * L'écart fait partie de l'emplacement : sa largeur vaut la taille plus
 * l'écart, et l'icône occupe le carré du côté du début de ligne. Ainsi la
 * borne annule l'icône et l'écart ensemble. La taille et l'écart doivent
 * porter une unité (0px plutôt que 0).
 *
 * Couleur :
 *   L'icône est découpée dans la couleur du texte (masque) : elle suit l'état
 *   actif, le survol, le mode sombre, le contraste renforcé et les couleurs
 *   imposées par le système. Le dessin SVG ne sert que de forme.
 */

.abs-icone {
	display: inline-block;
	flex: none;
	box-sizing: content-box;
	inline-size: calc( var( --abs-icone-taille, 0px ) + var( --abs-icone-ecart, 0px ) );
	block-size: var( --abs-icone-taille, 0px );
	vertical-align: -0.15em;
	background-color: currentColor;
	-webkit-mask: var( --abs-icone, none ) left center / var( --abs-icone-taille, 0px ) var( --abs-icone-taille, 0px ) no-repeat;
	mask: var( --abs-icone, none ) left center / var( --abs-icone-taille, 0px ) var( --abs-icone-taille, 0px ) no-repeat;
}

[dir="rtl"] .abs-icone {
	-webkit-mask-position: right center;
	mask-position: right center;
}

@media ( forced-colors: active ) {

	.abs-icone {
		forced-color-adjust: none;
		background-color: CanvasText;
	}

	a .abs-icone {
		background-color: LinkText;
	}

	button .abs-icone {
		background-color: ButtonText;
	}
}