/**
 * Font Size Slider – front-end styles
 *
 * The blue fill/label color is driven by the --fss-color custom property,
 * set inline on .fss-widget by the shortcode. The filled portion of the
 * track is driven by --fss-fill (a percentage) updated from JavaScript.
 */

.fss-widget {
	--fss-color: #1A3A6D;
	--fss-track: #d9dee6;
	--fss-thumb: #5b6472;
	--fss-fill: 50%;

	display: inline-flex;
	align-items: center;
	gap: 12px;
	line-height: 1;
	vertical-align: middle;
	/* Keep the widget itself immune to the scaling it controls. */
	font-size: 16px;
}

/* "Aa" labels */
.fss-widget .fss-label {
	color: var(--fss-color);
	font-weight: 700;
	font-family: Georgia, "Times New Roman", serif;
	user-select: none;
}

.fss-widget .fss-label--small {
	font-size: 15px;
}

.fss-widget .fss-label--large {
	font-size: 26px;
}

/* ---- Range input reset ---- */
.fss-widget .fss-range {
	-webkit-appearance: none;
	appearance: none;
	width: 120px;
	height: 22px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	touch-action: none;
}

.fss-widget .fss-range:focus {
	outline: none;
}

.fss-widget .fss-range:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(26, 58, 109, 0.35);
}
.fss-widget .fss-range:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px rgba(26, 58, 109, 0.35);
}

/* ---- Track (WebKit / Blink) ---- */
.fss-widget .fss-range::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 6px;
	background: linear-gradient(
		to right,
		var(--fss-color) 0%,
		var(--fss-color) var(--fss-fill),
		var(--fss-track) var(--fss-fill),
		var(--fss-track) 100%
	);
}

/* ---- Track (Firefox) ---- */
.fss-widget .fss-range::-moz-range-track {
	height: 6px;
	border-radius: 6px;
	background: var(--fss-track);
}
.fss-widget .fss-range::-moz-range-progress {
	height: 6px;
	border-radius: 6px;
	background: var(--fss-color);
}

/* ---- Thumb (WebKit / Blink) ---- */
.fss-widget .fss-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	margin-top: -6px; /* center on the 6px track */
	border: none;
	border-radius: 50%;
	background: var(--fss-thumb);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	transition: box-shadow 0.15s ease;
}

/* ---- Thumb (Firefox) ---- */
.fss-widget .fss-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: none;
	border-radius: 50%;
	background: var(--fss-thumb);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	transition: box-shadow 0.15s ease;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.fss-widget .fss-range::-webkit-slider-thumb,
	.fss-widget .fss-range::-moz-range-thumb {
		transition: none;
	}
}