/**
 * SGS Floating UI — shared styles.
 *
 * CSS custom properties (--btt-bg, --btt-icon, --btt-pos, --rp-colour,
 * --rp-height, and --rp-gradient when set) are set in a scoped style block by the PHP renderer from Customiser values.
 * Each consumer rule below carries its own var(--x, default) fallback; this file sets no defaults on the wrapper, so the inline Customiser values always win.
 */

/* ── Reading Progress bar ───────────────────────────────────────────────────── */

.sgs-floating-ui__reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--rp-height, 4px);
	background-color: var(--rp-colour, #0f7e80);
	background-image: var(--rp-gradient, none);
	/* A full-width bar scaled from the left: the whole gradient always fits the visible part. */
	transform: scaleX(var(--rp-progress, 0));
	transform-origin: 0 50%;
	background-repeat: no-repeat;
	z-index: 9999;
	transition: transform 0.1s linear;
	pointer-events: none;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.sgs-floating-ui__reading-progress {
		transition: none;
	}
}

/* ── Back to Top button ─────────────────────────────────────────────────────── */

.sgs-floating-ui__back-to-top {
	position: fixed;
	bottom: 24px;
	z-index: 9998;

	/* 44 × 44 px minimum touch target (WCAG 2.2 SC 2.5.8) */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;

	background-color: var(--btt-bg, #0f7e80);
	color: var(--btt-icon, #ffffff);
	border: none;
	border-radius: 50%;
	cursor: pointer;

	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.sgs-floating-ui__back-to-top--right {
	right: 24px;
}

.sgs-floating-ui__back-to-top--left {
	left: 24px;
}

/* Visible state toggled by JS */
.sgs-floating-ui__back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.sgs-floating-ui__back-to-top:hover {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.sgs-floating-ui__back-to-top,
	.sgs-floating-ui__back-to-top:hover {
		transition: none;
		transform: none;
	}
}