/**
 * Rich Text Formatter - Frontend Styles
 * Optimized for performance and Block Themes
 */

/* Marker Styles - Performance Optimized */
.rtf-marker {
	background: linear-gradient(transparent 60%, var(--marker-color, #fff59d) 60%);
	padding: 0 0.1em;
	line-height: 1.6;
	/* Performance optimizations */
	contain: layout style;
	will-change: auto;
	transform: translateZ(0); /* Force GPU acceleration when needed */
}

/* When marker contains gradient text (nested elements) */
/* Using descendant selector for better browser compatibility than :has() */
/* Remove this rule as it interferes with inline styles */

.rtf-marker[data-color="yellow"] {
	--marker-color: var(--rtf-marker-yellow, #fff59d);
}

.rtf-marker[data-color="blue"] {
	--marker-color: var(--rtf-marker-blue, #b3e5fc);
}

.rtf-marker[data-color="green"] {
	--marker-color: var(--rtf-marker-green, #c8e6c9);
}

.rtf-marker[data-color="pink"] {
	--marker-color: var(--rtf-marker-pink, #f8bbd0);
}

/* Marker Style Variants - Using body class for global style setting */
body.rtf-marker-style-bold .rtf-marker {
	background: linear-gradient(transparent 50%, var(--marker-color, #fff59d) 50%);
	font-weight: inherit;
}

body.rtf-marker-style-thin .rtf-marker {
	background: linear-gradient(transparent 70%, var(--marker-color, #fff59d) 70%, var(--marker-color, #fff59d) 80%, transparent 80%);
}

body.rtf-marker-style-stripe .rtf-marker {
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 2px,
		var(--marker-color, #fff59d) 2px,
		var(--marker-color, #fff59d) 4px
	);
	background-position: 0 60%;
	background-size: 100% 40%;
	background-repeat: no-repeat;
}

body.rtf-marker-style-dot .rtf-marker {
	background-image: radial-gradient(
		circle,
		var(--marker-color, #fff59d) 1px,
		transparent 1px
	);
	background-position: 0 70%;
	background-size: 4px 4px;
	background-repeat: repeat-x;
}

/* Font Size */
.rtf-fz {
	/* Inline style applied via editor */
}

/* Background Color */
.rtf-bg-color {
	border-radius: 2px;
	/* Inline style applied via editor */
}

/* Text Color */
.rtf-text-color {
	/* Inline style applied via editor */
}

/* Gradient Text */
.rtf-gradient,
.rtf-gradient-multi {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: inline;
	padding: 0.25em 0.1em;
	line-height: 1.6;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	position: relative;
	z-index: 1;
}

/* Performance: Use CSS containment for formatted text */
.rtf-marker,
.rtf-fz,
.rtf-bg-color,
.rtf-text-color {
	contain: layout style;
}


/* Print styles */
@media print {
	.rtf-marker {
		background: none !important;
		text-decoration: underline;
		text-decoration-color: var(--marker-color, #000);
		text-decoration-thickness: 2px;
	}

	.rtf-bg-color {
		background: none !important;
		border: 1px solid #ccc;
	}
}