/* =========================================================
   FLOATING CONTROLS — the toolbox (inc/floating-controls.php)
   One narrow bar of icons in the bottom left corner, as tall as the
   controls that show; its top button expands it so each icon shows its
   name, and back to top comes and goes at the bottom. On phones the bar
   is that button (and back to top) until it is expanded. Loaded only
   while at least one control shows.

   The header's glass (global.css, GLASS: its tint, blur and edge lines)
   in the bar's own colour: --st-float-color (by default the Foreground
   role — dark on a light page, light in dark mode) with icons in
   --st-float-ink (Background), both set on .st-float from the owner's
   choice. Only theme.json values: palette roles, spacing, radius, font
   sizes, the glass tint and blur.
   ========================================================= */

/* The buttons' size, and the toolbox's height from it (one button and the
   bar's padding — the corner it takes on a phone, where the bar is one
   button) — known before anything is drawn, so the room global.css keeps
   for it never changes after the page has loaded. */
body {
	--st-float-size: 30px;
	--st-float-height: calc(var(--st-float-size) + 8px);
}

/* A finger needs more room than a mouse pointer (user, 2026-10-24; both
   a fifth smaller, 2026-10-30). */
@media (pointer: coarse) {

	body {
		--st-float-size: 36px;
	}
}

.st-float {
	--st-float-edge: var(--wp--preset--spacing--sm);
	--st-float-line: color-mix(in srgb, var(--st-float-ink) 18%, transparent);
	position: fixed;

	/* Above Strata Toolkit's Bottom Bar when the page has one (its height
	   includes the safe area), and above the footer's edge while the
	   footer only peeks in (--st-float-lift, floating-controls.js). */
	bottom: calc(var(--st-float-edge) + var(--st-bottom-bar-height, env(safe-area-inset-bottom, 0px)) + var(--st-float-lift, 0px));
	left: calc(var(--st-float-edge) + env(safe-area-inset-left, 0px));
	z-index: 40;
}

/* The bar: glass in its own colour. */
.st-float__bar {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: max-content;
	padding: 3px;
	border: 1px solid var(--st-float-line);
	border-radius: var(--wp--custom--border-radius--lg);
	background-color: color-mix(in srgb, var(--st-float-color) var(--wp--custom--float--tint), transparent);
	-webkit-backdrop-filter: var(--st-glass-filter);
	backdrop-filter: var(--st-glass-filter);
	box-shadow: var(--st-glass-lines), var(--st-glass-shadow);
	color: var(--st-float-ink);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.st-float__bar {
		background-color: var(--st-float-color);
	}
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {

	.st-float__bar {
		background-color: var(--st-float-color);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@media (prefers-contrast: more) {

	.st-float {
		--st-float-line: var(--st-float-ink);
	}
}

.st-float__controls {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Each control, and the expand button: the icon centred in a square while
   the name has no width; expanded, the name beside it. */
.st-float :is(.st-float__control, .st-float__expand) {
	position: relative;
	display: flex;
	align-items: center;
	min-width: var(--st-float-size);
	height: var(--st-float-size);
	margin: 0;
	padding: 0 calc((var(--st-float-size) - 16px) / 2);
	border: 0;
	border-radius: var(--wp--custom--border-radius--md);
	background-color: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.2;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--fast);
}

.st-float :is(.st-float__control, .st-float__expand):hover,
.st-float__expand[aria-expanded="true"] {
	background-color: color-mix(in srgb, var(--st-float-ink) 14%, transparent);
}

.st-float :is(.st-float__control, .st-float__expand):focus-visible {
	outline: 2px solid var(--st-float-ink);
	outline-offset: 1px;
}

.st-float svg {
	flex: none;
	width: 16px;
	height: 16px;
}

/* A hairline between the expand button and the controls under it. */
.st-float__expand {
	margin-bottom: 3px;
}

.st-float__expand::before {
	content: "";
	position: absolute;
	right: 5px;
	bottom: -4px;
	left: 5px;
	height: 1px;
	background-color: var(--st-float-line);
}

/* Nothing under it: no line. */
.st-float__expand:has(+ .st-float__controls:not(:has(> :not(.st-float__control--top:not(.is-shown))))) {
	margin-bottom: 0;
}

.st-float__expand:has(+ .st-float__controls:not(:has(> :not(.st-float__control--top:not(.is-shown)))))::before {
	content: none;
}

/* The name: no width until the bar is expanded, then it slides out. */
.st-float__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition:
		max-width var(--wp--custom--transition--base),
		margin var(--wp--custom--transition--base),
		opacity var(--wp--custom--transition--fast);
}

.st-float.is-expanded .st-float__label {
	max-width: 16rem;
	margin-inline: 0.75rem 0.5rem;
	opacity: 1;
}

/* Collapsed: the name beside the icon on hover and keyboard focus. */
.st-float:not(.is-expanded) .st-float__control:focus-visible .st-float__label,
.st-float:not(.is-expanded) .st-float__expand:focus-visible .st-float__label {
	position: absolute;
	top: 50%;
	left: calc(100% + 12px);
	max-width: none;
	padding: 0.375rem 0.625rem;
	border-radius: var(--wp--custom--border-radius--md);
	background-color: var(--st-float-color);
	box-shadow: var(--wp--preset--shadow--md);
	color: var(--st-float-ink);
	font-size: var(--wp--preset--font-size--xs);
	opacity: 1;
	transform: translateY(-50%);
	transition: none;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {

	.st-float:not(.is-expanded) :is(.st-float__control, .st-float__expand):hover .st-float__label {
		position: absolute;
		top: 50%;
		left: calc(100% + 12px);
		max-width: none;
		padding: 0.375rem 0.625rem;
		border-radius: var(--wp--custom--border-radius--md);
		background-color: var(--st-float-color);
		box-shadow: var(--wp--preset--shadow--md);
		color: var(--st-float-ink);
		font-size: var(--wp--preset--font-size--xs);
		opacity: 1;
		transform: translateY(-50%);
		transition: opacity var(--wp--custom--transition--fast) 0.3s;
		pointer-events: none;
	}
}

/* Back to top comes in once the page has scrolled (floating-controls.js),
   at the bottom of the bar, which grows up from the corner. */
.st-float__control--top:not(.is-shown) {
	display: none;
}

.st-float__control--top.is-shown {
	transition:
		opacity var(--wp--custom--transition--base),
		background-color var(--wp--custom--transition--fast);
}

@starting-style {

	.st-float__control--top.is-shown {
		opacity: 0;
	}
}

/* While more of the footer shows than a peek (floating-controls.js), the
   bar would cover its first column: the expand button (and back to top)
   until it is expanded, as on a phone. */
.st-float.is-at-footer:not(.is-expanded) .st-float__control:not(.st-float__control--top) {
	display: none;
}

.st-float.is-at-footer:not(.is-expanded) .st-float__expand:has(+ .st-float__controls:not(:has(> .st-float__control--top.is-shown))) {
	margin-bottom: 0;
}

.st-float.is-at-footer:not(.is-expanded) .st-float__expand:has(+ .st-float__controls:not(:has(> .st-float__control--top.is-shown)))::before {
	content: none;
}

/* Phones: the expand button (and back to top) until it is expanded; then
   every control with its name, coming up from the corner. */
@media (max-width: 768px) {

	.st-float:not(.is-expanded) .st-float__control:not(.st-float__control--top) {
		display: none;
	}

	.st-float:not(.is-expanded) .st-float__expand:has(+ .st-float__controls:not(:has(> .st-float__control--top.is-shown))) {
		margin-bottom: 0;
	}

	.st-float:not(.is-expanded) .st-float__expand:has(+ .st-float__controls:not(:has(> .st-float__control--top.is-shown)))::before {
		content: none;
	}

	.st-float.is-expanded .st-float__control {
		transition:
			opacity var(--wp--custom--transition--base),
			translate var(--wp--custom--transition--base),
			background-color var(--wp--custom--transition--fast);
	}

	@starting-style {

		.st-float.is-expanded .st-float__control {
			opacity: 0;
			translate: 0 6px;
		}
	}
}

@media (prefers-reduced-motion: reduce) {

	.st-float :is(.st-float__label, .st-float__control, .st-float__expand) {
		transition: none;
	}
}

@media print {

	.st-float {
		display: none;
	}
}