/**
 * Schräge Auszeichnung – Frontend
 *
 * Alle Werte laufen über CSS-Variablen. Der :root-Block mit den globalen
 * Standardwerten wird vom Plugin inline ergänzt; die Werte hier dienen als
 * Rückfallebene, falls das Inline-CSS einmal nicht greift.
 */

:root {
	--sma-bg: #5bd24b;
	--sma-color: #ffffff;
	--sma-angle: -12deg;
	--sma-pad-l: 0.34em;
	--sma-pad-r: 0.34em;
	--sma-pad-y: 0.04em;
	--sma-radius: 0;
}

.sma-mark {
	position: relative;
	z-index: 0;
	display: inline-block;
	padding-inline: var(--sma-pad-l) var(--sma-pad-r);
	color: var(--sma-color);
}

.sma-mark::before {
	content: "";
	position: absolute;
	inset: calc(var(--sma-pad-y) * -1) 0;
	z-index: -1;
	background: var(--sma-bg);
	border-radius: var(--sma-radius);
	transform: skewX(var(--sma-angle));
}

/* Links innerhalb der Auszeichnung erben die eingestellte Schriftfarbe. */
.sma-mark a,
a .sma-mark {
	color: inherit;
}

.sma-heading {
	margin: 0;
}