/**
 * Text Formats – Frontend & Editor styles
 * Sketch Highlight (.gb-fmt-circle), Marker (.gb-fmt-marker)
 *
 * @package GutenBlockPro
 */

/* ==============================================
   Sketch Highlight – SVG background-image, scales with text.
   background-image, background-size, background-position and padding
   are all set per-variant as inline style via JS (buildSketchStyle).
   ============================================== */

.gb-fmt-circle {
	display: inline;
	background-repeat: no-repeat;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ==============================================
   Marker (text highlighter)
   Uses --gb-fmt-color for gradient
   ============================================== */

.gb-fmt-marker {
	--gb-fmt-color: rgb(255 243 205 / 70%);
	margin: 0 -0.4em;
	padding: 0.1em 0.4em;
	border-radius: 0.8em 0.3em;
	background: transparent;
	background-image: linear-gradient(
		to right,
		color-mix(in srgb, var(--gb-fmt-color) 50%, transparent),
		var(--gb-fmt-color) 4%,
		color-mix(in srgb, var(--gb-fmt-color) 21%, transparent)
	);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Fallback for older browsers without color-mix: use opacity on solid color */
@supports not (background-image: linear-gradient(to right, color-mix(in srgb, red, transparent), red)) {
	.gb-fmt-marker {
		background-image: linear-gradient(
			to right,
			rgba(255, 243, 205, 0.35),
			var(--gb-fmt-color) 4%,
			rgba(255, 243, 205, 0.21)
		);
	}
}