/**
*  Icons (Phosphor duotone, inline)
*
*  Linien schwarz (--icon-line), zweite Ebene in der Primär-Buttonfarbe der
*  jeweiligen style_id (--icon-duo = --btn-primary-bg). Die Phosphor-Dateien bleiben
*  unverändert: die zweite Ebene ist der Pfad mit opacity-Attribut.
*  Auf dunklem Grund --icon-line im Modul auf eine helle Farbe setzen
*  (Kontrast der Linie gegen den Grund mindestens 3 : 1, WCAG 1.4.11).
**/

.c-icon {
	display: inline-block;
	inline-size: var(--icon-size, 1.5em);
	block-size: var(--icon-size, 1.5em);
	color: var(--icon-line, #000);
	line-height: 0;
	vertical-align: middle;

	& > svg {
		display: block;
		inline-size: 100%;
		block-size: 100%;
	}

	& [opacity] {
		fill: var(--icon-duo, var(--btn-primary-bg));
		opacity: var(--icon-duo-opacity, 1);
	}
}

/* Im Button folgen die Linien der Textfarbe des Buttons (Hover eingeschlossen).
   Sie ist je style_id und Variante auf den Buttongrund abgestimmt, schwarz würde
   auf dunklen Buttons (pth: petrol) nur 2,8 : 1 erreichen. */
.c-button__link .c-icon {
	--icon-line: currentColor;
	--icon-size: var(--fs-4);
}