/**
 * Oktimus Button extras — size presets + up to two icons for buttons & nav links.
 *
 * TWO icon-rendering models share this sheet (see ButtonExtras.php):
 *
 *   • FRONT — real inline `<svg>` inside `.oktimus-btn-icon` spans injected into the
 *     link. Placement/order/"icon only" are driven by flex `order` + a few scoped
 *     custom properties, NEVER by `::before`/`::after` — so the link's pseudo-elements
 *     stay free for advanced button designs. See "Front" below.
 *
 *   • EDITOR — the button link is a RichText `contenteditable`; nodes can't be injected
 *     into it, so the JS extension paints the glyphs on masked pseudo-elements filled
 *     with `currentColor` (LEFT on `::before`, RIGHT on `::after`) via wrapper custom
 *     properties. See "Editor icon model" below.
 *
 * The two never collide: the front sets neither the `oktimus-has-icon-start/-end`
 * classes nor the `--okt-btn-icon-*` vars the pseudo rules key on (so those rules are
 * inert on the front), and the editor injects no `.oktimus-btn-icon` spans (so the
 * real-node rules are inert in the canvas). `.oktimus-has-icon` (flex layout) is the
 * only shared hook.
 */

/* Size presets — S and L only. M is the default/reset (no class), so a medium button
 * renders exactly like the theme default. */
.wp-block-button.oktimus-btn-small .wp-block-button__link {
	padding: 0.4em 0.9em;
	font-size: 0.85em;
}

.wp-block-button.oktimus-btn-large .wp-block-button__link {
	padding: 0.9em 1.8em;
	font-size: 1.15em;
}

/* Icon layout — the link becomes a flex row so glyphs sit inline (shared: front
 * real spans AND editor pseudo-elements are flex items of this row). */
.wp-block-button.oktimus-has-icon .wp-block-button__link,
.wp-block-navigation-item.oktimus-has-icon .wp-block-navigation-item__content {
	display: inline-flex;
	flex-direction: var(--okt-btn-ico-dir, row); /* column = icon Above / Below */
	align-items: center;
	gap: 0.5em;
}

/* The link is a flex container: `text-align` no longer aligns anything, so replay it as
 * `justify-content`. Centered by default (core parity: a wide button without icon
 * centres its label), then the `has-text-align-*` classes take over. */
.wp-block-button.oktimus-has-icon .wp-block-button__link {
	justify-content: center;
}

.wp-block-button.oktimus-has-icon .wp-block-button__link.has-text-align-left,
.wp-block-navigation-item.oktimus-has-icon .wp-block-navigation-item__content.has-text-align-left {
	justify-content: flex-start;
}

.wp-block-button.oktimus-has-icon .wp-block-button__link.has-text-align-center,
.wp-block-navigation-item.oktimus-has-icon .wp-block-navigation-item__content.has-text-align-center {
	justify-content: center;
}

.wp-block-button.oktimus-has-icon .wp-block-button__link.has-text-align-right,
.wp-block-navigation-item.oktimus-has-icon .wp-block-navigation-item__content.has-text-align-right {
	justify-content: flex-end;
}

/* ── Front: real inline-SVG icons ─────────────────────────────────────────────
 * Injected as `.oktimus-btn-icon` spans INSIDE the link, so `.wp-block-button__link`'s
 * ::before/::after remain free for custom designs. Visual order is pure flex `order`
 * (label/text = 0, icons never 0): solo default 1 (after text), first icon (a) -1,
 * second (b) 1. The before/after toggle + per-breakpoint inversion just flip those
 * orders via the scoped `--okt-btn-ico-*` vars emitted server-side. */
.oktimus-btn-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Size ~1.25× the text (a peer of the label), but keep a 1em vertical footprint via
	 * negative block margins → an icon button is exactly as tall as a text one. */
	width: var(--okt-btn-icon-size, 1.25em);
	height: var(--okt-btn-icon-size, 1.25em);
	margin-block: calc(
		(1em - var(--okt-btn-icon-size, 1.25em)) / 2 * var(--okt-btn-ico-flat, 1)
	);
}

/* The SVG fills its span. No forced `fill`: icons authored with `currentColor` follow
 * the button text colour (the default library sets do), while multicolour icons keep
 * their own colours. */
.oktimus-btn-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.oktimus-btn-icon-solo {
	order: var(--okt-btn-ico-order, 1);
}

.oktimus-btn-icon-a {
	order: var(--okt-btn-ico-a-order, -1);
}

.oktimus-btn-icon-b {
	order: var(--okt-btn-ico-b-order, 1);
}

/* Wrapped button label (only present when "icon only" is in play). inline-block so the
 * icon-only rule can clip it to width 0 while its line-box keeps the button's height;
 * the text stays in the DOM = accessible name preserved. */
.oktimus-btn-label {
	display: inline-block;
	vertical-align: middle;
}

/* ── Editor icon model (masked pseudo-elements) ───────────────────────────────
 * Everything from here to the "Editor only" section paints icons on ::before/::after.
 * It fires only when `oktimus-has-icon-start/-end` + the `--okt-btn-icon-*` vars are
 * set — which the JS extension does in the canvas, and the front NEVER does (front uses
 * the real `.oktimus-btn-icon` spans above). So these rules are effectively editor-only. */

/* The glyph box — shared by both slots.
 *
 * Size = --okt-btn-icon-size (default 1.25em, i.e. ~1.25× the text — large enough
 * to read as a peer of the label, not a tiny mark). Override the variable to taste.
 *
 * Each glyph keeps a 1em vertical FOOTPRINT via negative block margins: its
 * margin-box height collapses back to 1em (= the text's own line box), so a button
 * WITH icons is exactly as tall as one WITHOUT — no baseline mismatch between
 * neighbouring buttons. The extra size overflows symmetrically into the padding. */
.oktimus-has-icon-start .wp-block-button__link::before,
.oktimus-has-icon-start .wp-block-navigation-item__content::before,
.oktimus-has-icon-end .wp-block-button__link::after,
.oktimus-has-icon-end .wp-block-navigation-item__content::after {
	content: "";
	flex: 0 0 auto;
	width: var(--okt-btn-icon-size, 1.25em);
	height: var(--okt-btn-icon-size, 1.25em);
	margin-block: calc(
		(1em - var(--okt-btn-icon-size, 1.25em)) / 2 * var(--okt-btn-ico-flat, 1)
	);
	background-color: currentColor;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
}

/* Left glyph → ::before (order -1), masked by --okt-btn-icon-start. */
.oktimus-has-icon-start .wp-block-button__link::before,
.oktimus-has-icon-start .wp-block-navigation-item__content::before {
	order: -1;
	-webkit-mask-image: var(--okt-btn-icon-start);
	        mask-image: var(--okt-btn-icon-start);
}

/* Right glyph → ::after (order 0), masked by --okt-btn-icon-end. */
.oktimus-has-icon-end .wp-block-button__link::after,
.oktimus-has-icon-end .wp-block-navigation-item__content::after {
	order: 0;
	-webkit-mask-image: var(--okt-btn-icon-end);
	        mask-image: var(--okt-btn-icon-end);
}

/* Single icon (`oktimus-icon-solo`): the lone glyph lives on ::after and can flip
 * sides per breakpoint via --okt-icon-order (-1 = start / 0 = end), set on the
 * wrapper by ResponsiveRender (front) or inline (editor preview). */
.oktimus-icon-solo.oktimus-has-icon-end .wp-block-button__link::after,
.oktimus-icon-solo.oktimus-has-icon-end .wp-block-navigation-item__content::after {
	order: var(--okt-icon-order, 0);
}

/* ── Icon only ──────────────────────────────────────────────────────────────
 * Hide the text label WHILE keeping the button's natural height. Old-version pitfall:
 * `font-size:0` also collapsed the theme's em padding and line-height → the button
 * got shorter (misaligned vs text buttons). Here we keep the font normal: the theme's
 * padding-block + line-height stay intact, so the SAME height as a text button. The
 * label is pushed out of view (`text-indent` + `overflow`) — font stays normal so the
 * glyph keeps its `currentColor`. The glyph is ABSOLUTELY centered (visible whatever
 * the order, solo or two icons). Width is reduced to a compact square via `max-width`,
 * which does NOT affect the height. `display:inline-block` (instead of the base flex)
 * is required for `text-indent` to push the label; the `.wp-block-button` /
 * `.wp-block-navigation-item` prefix beats the base flex rule's specificity. Covers
 * the GLOBAL case: editor preview (`oktimus-btn-icon-only`) + front "base" tier
 * (`oktimus-btn-icon-only-base`). Per-breakpoint bands are emitted by ButtonExtras.php. */
.wp-block-button.oktimus-btn-icon-only .wp-block-button__link,
.wp-block-button.oktimus-btn-icon-only-base .wp-block-button__link,
.wp-block-navigation-item.oktimus-btn-icon-only .wp-block-navigation-item__content,
.wp-block-navigation-item.oktimus-btn-icon-only-base .wp-block-navigation-item__content {
	position: relative;
	display: inline-block;
	/* Baseline of an `overflow:hidden` inline-block = its bottom border edge (CSS spec)
	 * → a phantom descender that inflates the `.wp-block-button` wrapper (~+7px) and
	 * shifts the icon-only button vs text buttons in an `align-items:center` row.
	 * `middle` drops that baseline dependency → the wrapper hugs the link. */
	vertical-align: middle;
	overflow: hidden;
	gap: 0;
	white-space: nowrap;
	text-indent: 200%;
	padding-inline: var(--okt-btn-icon-only-pad, 0.8em);
	max-width: calc(
		var(--okt-btn-icon-size, 1.25em) + 2 *
			var(--okt-btn-icon-only-pad, 0.8em)
	);
}

/* Glyph centered absolutely — the only one visible (::after hidden with two icons). */
.oktimus-btn-icon-only .wp-block-button__link::before,
.oktimus-btn-icon-only .wp-block-button__link::after,
.oktimus-btn-icon-only-base .wp-block-button__link::before,
.oktimus-btn-icon-only-base .wp-block-button__link::after,
.oktimus-btn-icon-only .wp-block-navigation-item__content::before,
.oktimus-btn-icon-only .wp-block-navigation-item__content::after,
.oktimus-btn-icon-only-base .wp-block-navigation-item__content::before,
.oktimus-btn-icon-only-base .wp-block-navigation-item__content::after {
	position: absolute;
	inset: 0;
	margin: auto;
	width: var(--okt-btn-icon-size, 1.25em);
	height: var(--okt-btn-icon-size, 1.25em);
}

/* Two icons + icon only → keep only the START glyph (::before); hide the END one
 * (::after). To keep the other icon instead, invert the order on that breakpoint. */
.oktimus-has-icon-start.oktimus-has-icon-end.oktimus-btn-icon-only .wp-block-button__link::after,
.oktimus-has-icon-start.oktimus-has-icon-end.oktimus-btn-icon-only-base .wp-block-button__link::after,
.oktimus-has-icon-start.oktimus-has-icon-end.oktimus-btn-icon-only .wp-block-navigation-item__content::after,
.oktimus-has-icon-start.oktimus-has-icon-end.oktimus-btn-icon-only-base .wp-block-navigation-item__content::after {
	display: none;
}

/* ── Editor only ──────────────────────────────────────────────────────────────
 * This sheet loads INSIDE the editor canvas (block style) AND on the front. The
 * rules below only target editor-only classes (`.block-editor-rich-text__editable`,
 * `.is-selected`) so they are inert on the front. They fix two canvas artefacts of
 * the icon model. */

/* (1) Icon only, in the editor. The button link IS the RichText editable, which
 * carries an INLINE `white-space:pre-wrap` (space preservation while editing). Our
 * `nowrap` (selector specificity) cannot beat an inline style → the label wraps
 * vertically in the compact box (the "stacked text" bug). Force `nowrap` with
 * `!important` (beats the inline style). Also switch overflow to `clip` (instead of
 * `hidden`): a `clip` container is NOT scrollable, so focusing the field does not
 * scroll the hidden label into view (otherwise `text-indent` lets the start of the
 * text leak in on focus). Front unchanged (keeps `overflow:hidden`, universal — no
 * contenteditable there, so no scrolling). */
.wp-block-button.oktimus-btn-icon-only .wp-block-button__link.block-editor-rich-text__editable,
.wp-block-navigation-item.oktimus-btn-icon-only .wp-block-navigation-item__content.block-editor-rich-text__editable {
	white-space: nowrap !important;
	overflow: clip;
	overflow-clip-margin: 0;
}

/* (2) Selection indicator. The icons occupy ::before/::after, hiding the button's
 * subtle native selected-state indicator → you can't tell which button is being
 * edited. Add a WordPress-selection-like ring (admin accent colour) on the selected
 * button/link that carries icons. `.is-selected` is set by the editor on the same
 * element as `.oktimus-has-icon`. */
.wp-block-button.oktimus-has-icon.is-selected .wp-block-button__link,
.wp-block-navigation-item.oktimus-has-icon.is-selected .wp-block-navigation-item__content {
	outline: var(--wp-admin-border-width-focus, 1.5px) solid
		var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
	outline-offset: 2px;
}