.sixclicks-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

/* Icône cliquable : le lien ne doit rien ajouter à la boîte. */
.sixclicks-icon > a {
	display: block;
	line-height: 0;
	color: inherit;
}

.sixclicks-icon > svg,
.sixclicks-icon > a > svg,
.sixclicks-icon .sixclicks-icon__preview > svg {
	width: var(--sixclicks-icon-size, 64px);
	height: var(--sixclicks-icon-size, 64px);
	max-width: 100%;
	display: block;
}

/* Alignements fournis par supports.align */
.sixclicks-icon.aligncenter {
	display: flex;
	margin-inline: auto;
}

.sixclicks-icon.alignleft {
	margin-inline-end: auto;
}

.sixclicks-icon.alignright {
	margin-inline-start: auto;
}

.sixclicks-icon__preview {
	display: block;
	line-height: 0;
}

/* ------------------------------------------- Icône dans un texte riche

   Insérée par le format « Icône » (voir format.js) : un span vide dont le
   dessin vient d'un mask-image, pour qu'il prenne la couleur et la taille du
   texte qui l'entoure — libellé de bouton, paragraphe, titre.

   L'URL du masque est posée par icône dans une feuille générée en PHP. */

.sixclicks-inline-icon {
	display: inline-block;
	width: var(--sixclicks-inline-icon-size, 1em);
	height: var(--sixclicks-inline-icon-size, 1em);
	vertical-align: -0.125em;
	/* Le marqueur invisible qu'il contient ne doit rien pousser. */
	overflow: hidden;
	background-color: currentColor;
	-webkit-mask-image: var(--sixclicks-inline-icon-image);
	mask-image: var(--sixclicks-inline-icon-image);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}