/*
 * SVG-Icons einfärbbar machen.
 *
 * Elementor gibt die Icon-Farbe als "fill" auf dem <svg> aus. Damit das beim
 * Icon ankommt, muss der <path> die Farbe erben. Viele Icon-Sets (Iconify,
 * Material Symbols, Lucide ...) schreiben aber fill="currentColor" direkt an
 * den <path>. Ein Präsentationsattribut am Element selbst schlägt die
 * Vererbung vom Elternelement - das Icon zeigt dann nicht die eingestellte
 * Farbe, sondern die Textfarbe (meist schwarz).
 *
 * Umriss-Icons (fill="none" stroke="currentColor", typisch für Lucide, Tabler,
 * Solar Linear, Streamline, Feather) haben zusätzlich gar keine Fläche zum
 * Füllen. Für sie hilft "fill" grundsätzlich nicht, und "stroke" setzt
 * Elementor nirgends. Deshalb reicht class-svg-icon-color.php die eingestellte
 * Farbe als --markoon-icon-color an den Widget-Wrapper durch; hier wird sie
 * als stroke gesetzt.
 *
 * ------------------------------------------------------------------
 * 1. Flächen-Icons
 * ------------------------------------------------------------------
 *
 * fill: currentColor auf dem <svg> ist der Rückfallwert. Die Regel hat
 * absichtlich eine niedrige Spezifität - sobald im Elementor eine Farbe
 * gesetzt ist, gewinnt Elementors eigene Regel. Ist keine gesetzt, bleibt es
 * beim bisherigen Verhalten (Icon folgt der Textfarbe) statt auf den
 * SVG-Standard Schwarz zu fallen.
 *
 * fill: inherit gibt die Entscheidung vom <path> zurück an das <svg> - und das
 * trägt entweder Elementors Farbe oder den Rückfallwert. Hover-Farben ziehen
 * automatisch mit, weil Elementor die ebenfalls auf dem <svg> setzt.
 *
 * Buttons bleiben außen vor: dort setzt Elementor fill und color gemeinsam,
 * currentColor funktioniert also schon richtig.
 */

.elementor-icon-list-icon svg,
.elementor-icon svg,
.elementor-social-icon svg {
	fill: currentColor;
}

.elementor-icon-list-icon svg [fill="currentColor" i],
.elementor-icon svg [fill="currentColor" i],
.elementor-social-icon svg [fill="currentColor" i] {
	fill: inherit;
}

/*
 * ------------------------------------------------------------------
 * 2. Umriss-Icons
 * ------------------------------------------------------------------
 *
 * Ohne gesetzte Icon-Farbe fehlt die Variable, dann greift currentColor als
 * Rückfallwert - also exakt das Verhalten von vorher.
 */

.elementor-icon-list-icon svg [stroke="currentColor" i],
.elementor-icon svg [stroke="currentColor" i] {
	stroke: var(--markoon-icon-color, currentColor);
}

/*
 * Hover. Der Bereich, der die Farbe umschaltet, ist je Widget ein anderer:
 * die Icon-Liste färbt pro Zeile um, Icon und Icon-Box über das ganze Widget.
 * Ohne gesetzte Hover-Farbe fällt die Variable auf die normale Farbe zurück,
 * das Icon bleibt beim Überfahren also einfach stehen.
 */

.elementor-icon-list-item:hover .elementor-icon-list-icon svg [stroke="currentColor" i],
.elementor-widget:hover .elementor-icon svg [stroke="currentColor" i] {
	stroke: var(--markoon-icon-color-hover, var(--markoon-icon-color, currentColor));
}