/* KUMITATE Site Tools: boxes for paragraphs and groups, frames for groups and border sets.
   Tokens come from block-styles.css. Every rule is one class (or one
   attribute) strong, so a theme can override it with a single class. */

/* ------------------------------------------------------------------ */
/* Shared box frame                                                     */
/* ------------------------------------------------------------------ */
/* Inner space is kept in variables that each style may change, and applied
   once more with the group class: core's rule that removes the side padding
   of nested constrained groups would otherwise win. */
:is([class*="is-style-siteframe-tools-box-"], [class*="is-style-siteframe-tools-icon-"], [class*="is-style-siteframe-tools-big-"], [class*="is-style-siteframe-tools-frame-"], .siteframe-tools-border-1, .siteframe-tools-border-2, .siteframe-tools-border-3, .siteframe-tools-border-4) {
	--_st-pbs: var(--_st-py);
	--_st-pbe: var(--_st-py);
	--_st-pis: var(--_st-px);
	--_st-pie: var(--_st-px);
	box-sizing: border-box;
	border-radius: var(--_st-radius);
}
:is([class*="is-style-siteframe-tools-box-"], [class*="is-style-siteframe-tools-icon-"], [class*="is-style-siteframe-tools-big-"], [class*="is-style-siteframe-tools-frame-"]) { position: relative; }
:is([class*="is-style-siteframe-tools-box-"], [class*="is-style-siteframe-tools-icon-"], [class*="is-style-siteframe-tools-big-"], [class*="is-style-siteframe-tools-frame-"], .siteframe-tools-border-1, .siteframe-tools-border-2, .siteframe-tools-border-3, .siteframe-tools-border-4),
.wp-block-group:is([class*="is-style-siteframe-tools-box-"], [class*="is-style-siteframe-tools-icon-"], [class*="is-style-siteframe-tools-big-"], [class*="is-style-siteframe-tools-frame-"], .siteframe-tools-border-1, .siteframe-tools-border-2, .siteframe-tools-border-3, .siteframe-tools-border-4) {
	padding-block: var(--_st-pbs) var(--_st-pbe);
	padding-inline: var(--_st-pis) var(--_st-pie);
}
/* Boxes painting their own background also set the text color, so a box
   inside a dark section stays readable. A color chosen in the block wins. */
:is(.is-style-siteframe-tools-box-tint, .is-style-siteframe-tools-box-stitch, .is-style-siteframe-tools-box-raised, .is-style-siteframe-tools-box-inset, .is-style-siteframe-tools-box-stripe, .is-style-siteframe-tools-box-grid, .is-style-siteframe-tools-box-fold, .is-style-siteframe-tools-box-sticky, .is-style-siteframe-tools-box-speech, [class*="is-style-siteframe-tools-icon-"], [class*="is-style-siteframe-tools-big-"], [class*="is-style-siteframe-tools-frame-"]):where(:not(.has-text-color)) {
	color: var(--_st-text);
}
/* The first and last block inside a group box do not add space of their own,
   even where the theme gives headings a large top margin. */
.wp-block-group:is([class*="is-style-siteframe-tools-box-"], [class*="is-style-siteframe-tools-big-"], [class*="is-style-siteframe-tools-frame-"]) > :first-child { margin-block-start: 0; }
.wp-block-group:is([class*="is-style-siteframe-tools-box-"], [class*="is-style-siteframe-tools-big-"], [class*="is-style-siteframe-tools-frame-"]) > :last-child { margin-block-end: 0; }

/* ------------------------------------------------------------------ */
/* Plain boxes, quiet to loud                                           */
/* ------------------------------------------------------------------ */
.is-style-siteframe-tools-box-tint { background-color: var(--_st-tint); }

.is-style-siteframe-tools-box-outline { border: var(--_st-bw) solid var(--_st-accent); }

/* A dashed seam just inside the edge. */
.is-style-siteframe-tools-box-stitch {
	background-color: var(--_st-tint);
	outline: 2px dashed var(--_st-accent);
	outline-offset: -0.5em;
	--_st-pbs: 1.5em;
	--_st-pbe: 1.5em;
	--_st-pis: 1.8em;
	--_st-pie: 1.8em;
}

.is-style-siteframe-tools-box-raised {
	background-color: var(--_st-base);
	box-shadow: var(--_st-shadow);
}

.is-style-siteframe-tools-box-inset {
	background-color: var(--_st-tint);
	box-shadow: inset 0 2px 6px #00000024, inset 0 0 0 1px #0000000d;
}

.is-style-siteframe-tools-box-stripe {
	background-color: var(--_st-base);
	background-image: repeating-linear-gradient(-45deg, var(--_st-tint) 0 0.45em, transparent 0.45em 0.9em);
	border: var(--_st-bw) solid var(--_st-line);
}

.is-style-siteframe-tools-box-grid {
	--_st-grid: var(--_st-tint-strong);
	background-color: var(--_st-base);
	background-image:
		linear-gradient(var(--_st-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--_st-grid) 1px, transparent 1px);
	background-size: 1.25em 1.25em;
	background-position: -1px -1px;
	border: var(--_st-bw) solid var(--_st-line);
}

/* The top corner at the end folded over. The page color behind it is the theme's base color. */
.is-style-siteframe-tools-box-fold {
	background-color: var(--_st-tint);
	border-start-end-radius: 0;
}
.is-style-siteframe-tools-box-fold::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	width: 1.6em;
	height: 1.6em;
	background: linear-gradient(to bottom left, var(--_st-base) 50%, var(--_st-tint-strong) 50%);
	border-end-start-radius: 0.3em;
	box-shadow: -1px 1px 2px #0000001a;
}
.is-style-siteframe-tools-box-fold:dir(rtl)::after { background: linear-gradient(to bottom right, var(--_st-base) 50%, var(--_st-tint-strong) 50%); box-shadow: 1px 1px 2px #0000001a; }

/* Corner brackets, top left and bottom right. */
.is-style-siteframe-tools-box-brackets { --_st-pbs: 1.3em; --_st-pbe: 1.3em; --_st-pis: 1.6em; --_st-pie: 1.6em; border-radius: 0; }
.is-style-siteframe-tools-box-brackets::before,
.is-style-siteframe-tools-box-brackets::after {
	content: "";
	position: absolute;
	width: 1.4em;
	height: 1.4em;
	border: 0 solid var(--_st-accent);
	pointer-events: none;
}
.is-style-siteframe-tools-box-brackets::before { inset-block-start: 0; inset-inline-start: 0; border-block-start-width: 3px; border-inline-start-width: 3px; }
.is-style-siteframe-tools-box-brackets::after { inset-block-end: 0; inset-inline-end: 0; border-block-end-width: 3px; border-inline-end-width: 3px; }

.is-style-siteframe-tools-box-line {
	border-inline-start: 0.3em solid var(--_st-accent);
	border-radius: 0;
	--_st-pbs: 0.4em;
	--_st-pbe: 0.4em;
	--_st-pis: 1em;
	--_st-pie: 0;
}

.is-style-siteframe-tools-box-sticky {
	background-color: var(--_st-tint);
	border-inline-start: 0.55em solid var(--_st-accent);
	border-radius: 2px;
	box-shadow: 0 2px 5px #0000001a;
}

/* A speech box with a tail at the bottom, near the start. */
.is-style-siteframe-tools-box-speech {
	background-color: var(--_st-base);
	border: 2px solid var(--_st-accent);
}
/* Room for the tail, past core's flow layout margin reset. */
.is-style-siteframe-tools-box-speech:is(p, .wp-block-group) { margin-block-end: 0.8em; }
.is-style-siteframe-tools-box-speech::before,
.is-style-siteframe-tools-box-speech::after {
	content: "";
	position: absolute;
	inset-inline-start: 2em;
	border: solid transparent;
	pointer-events: none;
}
.is-style-siteframe-tools-box-speech::before { inset-block-start: 100%; border-width: 0.8em 0.7em 0; border-block-start-color: var(--_st-accent); }
.is-style-siteframe-tools-box-speech::after { inset-block-start: calc(100% - 2px); margin-inline-start: 3px; border-width: calc(0.8em - 4px) calc(0.7em - 3px) 0; border-block-start-color: var(--_st-base); }
.is-style-siteframe-tools-box-speech.has-background::after { border-block-start-color: transparent; }

/* ------------------------------------------------------------------ */
/* Small icon at the start (paragraphs)                                 */
/* ------------------------------------------------------------------ */
[class*="is-style-siteframe-tools-icon-"] {
	--_st-mark: var(--_st-accent);
	--_st-icon: var(--siteframe-tools-i-info);
	background-color: var(--_st-tint);
	--_st-pis: calc(1.1em + 1.35em + 0.75em);
}
.is-style-siteframe-tools-icon-good { --_st-mark: var(--_st-good); --_st-icon: var(--siteframe-tools-i-ring); }
.is-style-siteframe-tools-icon-bad { --_st-mark: var(--_st-bad); --_st-icon: var(--siteframe-tools-i-cross); }
.is-style-siteframe-tools-icon-info { --_st-mark: var(--_st-info); --_st-icon: var(--siteframe-tools-i-info); }
.is-style-siteframe-tools-icon-notice { --_st-icon: var(--siteframe-tools-i-bell); }
.is-style-siteframe-tools-icon-pen { --_st-icon: var(--siteframe-tools-i-pen); }
.is-style-siteframe-tools-icon-book { --_st-icon: var(--siteframe-tools-i-book); }

/* ------------------------------------------------------------------ */
/* Large icon in a column of its own (paragraphs and groups)            */
/* ------------------------------------------------------------------ */
[class*="is-style-siteframe-tools-big-"] {
	--_st-mark: var(--_st-accent);
	--_st-icon: var(--siteframe-tools-i-bulb);
	--_st-col: 3.4em;
	background-color: var(--_st-tint);
	--_st-pis: calc(var(--_st-col) + 1.2em);
	min-height: calc(var(--_st-col) + 0.6em);
}
[class*="is-style-siteframe-tools-big-"]::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: var(--_st-col);
	background-color: var(--_st-mark);
	border-start-start-radius: inherit;
	border-end-start-radius: inherit;
}
.is-style-siteframe-tools-big-point { --_st-icon: var(--siteframe-tools-i-bulb); }
.is-style-siteframe-tools-big-check { --_st-mark: var(--_st-good); --_st-icon: var(--siteframe-tools-i-check); }
.is-style-siteframe-tools-big-cross { --_st-mark: var(--_st-bad); --_st-icon: var(--siteframe-tools-i-cross); }
.is-style-siteframe-tools-big-question { --_st-mark: var(--_st-info); --_st-icon: var(--siteframe-tools-i-question); }
.is-style-siteframe-tools-big-caution { --_st-mark: var(--_st-caution); --_st-icon: var(--siteframe-tools-i-caution); }
.is-style-siteframe-tools-big-memo { --_st-mark: var(--_st-muted); --_st-icon: var(--siteframe-tools-i-memo); }

/* The icons are masks, painted in the mark color. Browsers without masks show the box without them. */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
	[class*="is-style-siteframe-tools-icon-"]::before,
	[class*="is-style-siteframe-tools-big-"]::after {
		content: "";
		position: absolute;
		background-color: var(--_st-mark);
		-webkit-mask: var(--_st-icon) center / contain no-repeat;
		mask: var(--_st-icon) center / contain no-repeat;
		pointer-events: none;
	}
	[class*="is-style-siteframe-tools-icon-"]::before {
		inset-block-start: calc(var(--_st-pbs) + (1lh - 1.35em) / 2);
		inset-inline-start: 1.1em;
		width: 1.35em;
		height: 1.35em;
	}
	[class*="is-style-siteframe-tools-big-"]::after {
		inset-block-start: calc(50% - 0.9em);
		inset-inline-start: calc((var(--_st-col) - 1.8em) / 2);
		width: 1.8em;
		height: 1.8em;
		background-color: var(--_st-on-accent);
	}
}
/* Browsers without the lh unit: the icon sits on the first line of a usual line height. */
@supports not (top: 1lh) {
	[class*="is-style-siteframe-tools-icon-"]::before { inset-block-start: calc(var(--_st-pbs) + 0.2em); }
}

/* ------------------------------------------------------------------ */
/* Frames for groups                                                    */
/* ------------------------------------------------------------------ */
.is-style-siteframe-tools-frame-browser {
	--_st-bar: 2.1em;
	background-color: var(--_st-base);
	border: 1px solid var(--_st-line);
	--_st-pbs: calc(var(--_st-bar) + var(--_st-py));
	overflow: hidden;
}
.is-style-siteframe-tools-frame-browser::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: var(--_st-bar);
	border-block-end: 1px solid var(--_st-line);
	background:
		radial-gradient(circle at 1.1em 50%, var(--_st-accent) 0.3em, transparent calc(0.3em + 1px)),
		radial-gradient(circle at 2.1em 50%, var(--_st-line) 0.3em, transparent calc(0.3em + 1px)),
		radial-gradient(circle at 3.1em 50%, var(--_st-line) 0.3em, transparent calc(0.3em + 1px)),
		var(--_st-tint);
}

.is-style-siteframe-tools-frame-desktop {
	--_st-bezel: var(--_st-text);
	background-color: var(--_st-base);
	border: 0.7em solid var(--_st-bezel);
	border-block-end-width: 1.8em;
	border-radius: 0.6em;
}
/* Room for the stand. Two classes: core's flow layout zeroes the bottom margin with one. */
.wp-block-group.is-style-siteframe-tools-frame-desktop { margin-block-end: calc(1.9em + 1.25rem); }
.is-style-siteframe-tools-frame-desktop::after {
	content: "";
	position: absolute;
	inset-block-start: calc(100% + 1.8em);
	inset-inline-start: 50%;
	width: min(34%, 12em);
	height: 1.9em;
	transform: translateX(-50%);
	background:
		linear-gradient(var(--_st-bezel), var(--_st-bezel)) 50% 0 / 34% 1.5em no-repeat,
		linear-gradient(var(--_st-bezel), var(--_st-bezel)) 50% 100% / 100% 0.4em no-repeat;
	pointer-events: none;
}
.is-style-siteframe-tools-frame-desktop:dir(rtl)::after { transform: translateX(50%); }

/* ------------------------------------------------------------------ */
/* Border sets (a class next to any style above)                        */
/* Core's own border settings are inline styles and win over these.    */
/* ------------------------------------------------------------------ */
.siteframe-tools-border-1 { border: var(--siteframe-tools-border-1, var(--_st-bw) solid var(--_st-accent)); }
.siteframe-tools-border-2 { border: var(--siteframe-tools-border-2, 4px double var(--_st-accent)); }
.siteframe-tools-border-3 { border: var(--siteframe-tools-border-3, 2px dashed var(--_st-line)); }
.siteframe-tools-border-4 { border: var(--siteframe-tools-border-4, 4px solid var(--_st-tint-strong)); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.is-style-siteframe-tools-box-grid { --_st-grid: color-mix(in srgb, var(--_st-accent) 13%, var(--_st-base)); }
}