/* Display styles for the core block extensions: space below, markers, font
   sizes, notes and no-wrap. Loaded only on pages that use one of the classes,
   and inside the editor canvas. Device hiding is printed separately, on the
   front end only, so the editor keeps every block visible. */

/* ---- Space below -------------------------------------------------------
   Flow layouts space blocks with the next block's margin-block-start, so a
   smaller margin below alone would not bring blocks closer. A block set from
   the toolbar decides the gap itself: the next block starts with no margin.
   The style check keeps this off once the core margin has been cleared.
   A block hidden on this screen size must not pull up the next one, so the
   device-only case is printed with the hiding rules. */
.siteframe-tools-mb[style*="margin-bottom"]:not(.siteframe-tools-sp-only, .siteframe-tools-pc-only) + * {
	margin-block-start: 0;
}

/* ---- Markers -----------------------------------------------------------
   Colours come from the theme palette where it has them. A theme or the
   custom CSS can set any of these variables on :root. */
:root {
	--siteframe-tools-marker-yellow: var(--wp--preset--color--marker-yellow, rgba(255, 224, 80, 0.55));
	--siteframe-tools-marker-pink: var(--wp--preset--color--marker-pink, rgba(255, 150, 175, 0.45));
	--siteframe-tools-marker-blue: var(--wp--preset--color--marker-blue, rgba(120, 180, 255, 0.4));
	--siteframe-tools-marker-accent: var(--wp--preset--color--marker-accent, rgba(23, 107, 85, 0.22));
	/* Shape: how much of the line is covered, and the stripe pattern.
	   A solid fill is a stripe with no gap. */
	--siteframe-tools-marker-height: 45%;
	--siteframe-tools-marker-line: 1em;
	--siteframe-tools-marker-gap: 0px;
	--siteframe-tools-fz-xs: 0.75em;
	--siteframe-tools-fz-s: 0.875em;
	--siteframe-tools-fz-l: 1.25em;
	--siteframe-tools-fz-xl: 1.5em;
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	:root {
		--siteframe-tools-marker-accent: var(--wp--preset--color--marker-accent, color-mix(in srgb, var(--wp--preset--color--accent, #176b55) 24%, transparent));
	}
}

/* Shapes as classes, on the marker itself or on any wrapper (a group, the body). */
.siteframe-tools-marker-thick {
	--siteframe-tools-marker-height: 45%;
	--siteframe-tools-marker-line: 1em;
	--siteframe-tools-marker-gap: 0px;
}
.siteframe-tools-marker-thin {
	--siteframe-tools-marker-height: 0.28em;
	--siteframe-tools-marker-line: 1em;
	--siteframe-tools-marker-gap: 0px;
}
.siteframe-tools-marker-stripe {
	--siteframe-tools-marker-height: 45%;
	--siteframe-tools-marker-line: 3px;
	--siteframe-tools-marker-gap: 2px;
}
.siteframe-tools-marker-thin-stripe {
	--siteframe-tools-marker-height: 0.4em;
	--siteframe-tools-marker-line: 2px;
	--siteframe-tools-marker-gap: 2px;
}

.siteframe-tools-marker {
	--siteframe-tools-marker-color: var(--siteframe-tools-marker-yellow);
	background-image: repeating-linear-gradient(
		-45deg,
		var(--siteframe-tools-marker-color) 0 var(--siteframe-tools-marker-line),
		transparent 0 calc(var(--siteframe-tools-marker-line) + var(--siteframe-tools-marker-gap))
	);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 100% var(--siteframe-tools-marker-height);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-inline: 0.1em;
}
.siteframe-tools-marker--yellow { --siteframe-tools-marker-color: var(--siteframe-tools-marker-yellow); }
.siteframe-tools-marker--pink { --siteframe-tools-marker-color: var(--siteframe-tools-marker-pink); }
.siteframe-tools-marker--blue { --siteframe-tools-marker-color: var(--siteframe-tools-marker-blue); }
.siteframe-tools-marker--accent { --siteframe-tools-marker-color: var(--siteframe-tools-marker-accent); }

@media (forced-colors: active) {
	.siteframe-tools-marker {
		background: none;
		text-decoration: underline;
	}
}

/* ---- Font size ---------------------------------------------------------- */
.siteframe-tools-fz-xs { font-size: var(--siteframe-tools-fz-xs); }
.siteframe-tools-fz-s { font-size: var(--siteframe-tools-fz-s); }
.siteframe-tools-fz-l { font-size: var(--siteframe-tools-fz-l); }
.siteframe-tools-fz-xl { font-size: var(--siteframe-tools-fz-xl); }
.siteframe-tools-fz-l,
.siteframe-tools-fz-xl {
	line-height: 1.4;
}

/* ---- Note and no-wrap --------------------------------------------------- */
.siteframe-tools-note {
	font-size: 0.8em;
}
.siteframe-tools-nowrap {
	white-space: nowrap;
}