/* Icônes de blocs (Lien de navigation, Titre, Bouton, Titre d'accordéon…) */

.wp-block-navigation-item__content,
.wp-block-accordion-heading__toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hf-block-icon {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	display: inline-flex;
	vertical-align: -0.125em;
}

.hf-block-icon--before {
	margin-right: 0.5em;
}

.hf-block-icon--after {
	margin-left: 0.5em;
}

.hf-block-icon svg,
.hf-block-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Aperçu éditeur (BO) : l'icône est simulée en CSS via un pseudo-élément afin de ne
   jamais manipuler le DOM interne des blocs gérés par RichText (Titre, Bouton…),
   ce qui la place réellement "dans" l'élément (texte du titre, lien du bouton…).
   Sur l'accordéon on cible le bouton toggle (pas le h3) pour ne pas entrer en
   conflit avec le chevron du thème posé en ::before sur .wp-block-accordion-heading. */
.hf-icon-wrap {
	--hf-icon-url: none;
}

.hf-icon-wrap :is(h1, h2, h3, h4, h5, h6):not(.wp-block-accordion-heading),
.hf-icon-wrap :is(.wp-block-button__link, .wp-block-navigation-item__content, .wp-block-accordion-heading__toggle) {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.hf-icon-wrap.hf-icon-pos-after :is(h1, h2, h3, h4, h5, h6):not(.wp-block-accordion-heading),
.hf-icon-wrap.hf-icon-pos-after :is(.wp-block-button__link, .wp-block-navigation-item__content, .wp-block-accordion-heading__toggle) {
	flex-direction: row-reverse;
}

.hf-icon-wrap :is(h1, h2, h3, h4, h5, h6):not(.wp-block-accordion-heading)::before,
.hf-icon-wrap :is(.wp-block-button__link, .wp-block-navigation-item__content, .wp-block-accordion-heading__toggle)::before {
	content: "";
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	background-image: var(--hf-icon-url);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.hf-icon-wrap.hf-icon-has-color :is(h1, h2, h3, h4, h5, h6):not(.wp-block-accordion-heading)::before,
.hf-icon-wrap.hf-icon-has-color :is(.wp-block-button__link, .wp-block-navigation-item__content, .wp-block-accordion-heading__toggle)::before {
	background-image: none;
	background-color: var(--hf-icon-color);
	-webkit-mask-image: var(--hf-icon-url);
	mask-image: var(--hf-icon-url);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}