/**
 * HMT Pace Slider
 *
 * Colours key off Avada's global palette variables, so the slider picks up the
 * brand colours as soon as they are set in Global Options. Every one can be
 * overridden per instance by redeclaring the --hmt-pace-* custom property.
 */

.hmt-pace {
	--hmt-pace-fill: var(--awb-color8, #141617);
	--hmt-pace-track: var(--awb-color4, #e5e6e8);
	--hmt-pace-thumb: var(--awb-color8, #141617);
	--hmt-pace-thumb-ring: var(--awb-color1, #ffffff);
	--hmt-pace-thumb-outline: var(--awb-color5, #d6d7d8);
	--hmt-pace-ink: var(--awb-color8, #141617);
	/* A lighter ink rather than a palette slot: slot meanings vary by site, and
	   --awb-color6 is the coral accent here. 75% stays AA on light backgrounds. */
	--hmt-pace-ink-muted: color-mix(in srgb, var(--awb-color8, #141617) 75%, transparent);
	--hmt-pace-focus: var(--awb-color5, #d6d7d8);
	/* The planning button. --awb-color4 is the light aqua here, and goes a step
	   darker to the aqua on hover. White text is too faint on either, so it
	   takes the dark ink. */
	--hmt-pace-planning: var(--awb-color4, #aeddda);
	--hmt-pace-planning-hover: var(--awb-color5, #89d3cf);
	--hmt-pace-planning-ink: var(--awb-color8, #003d51);
	--hmt-pace-thumb-size: 30px;
	--hmt-pace-track-height: 8px;
	--hmt-pace-max-width: 620px;
	--hmt-pace-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* Both overwritten inline on render. JS keeps the ratio in sync: 0 for the
	   first stop, 1 for the last. */
	--hmt-pace-ratio: 0.5;
	--hmt-pace-duration: 600ms;

	/* Centre of the thumb along the track. Like a native range thumb, it stays
	   inside the track at both ends, so it lines up with the invisible native
	   thumb the visitor is actually dragging. Percentages resolve against the
	   track wherever this is used. */
	--hmt-pace-pos: calc(var(--hmt-pace-thumb-size) / 2 + var(--hmt-pace-ratio) * (100% - var(--hmt-pace-thumb-size)));
}

.hmt-pace__title {
	margin: 0 0 10px;
}

/* The track box is as tall as the thumb, so the margins here take back the
   part of it that sits above and below the visible track. */
.hmt-pace__control {
	max-width: var(--hmt-pace-max-width);
	margin-top: calc(22px - (var(--hmt-pace-thumb-size) - var(--hmt-pace-track-height)) / 2);
}

/* Visually hidden, still read by assistive tech. */
.hmt-pace__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- track ---- */

/* The track, fill and thumb are drawn here and move on a transition. The
   native range input lies over them, invisible, and still takes every
   pointer, touch and keyboard interaction. */
.hmt-pace__track {
	position: relative;
	height: var(--hmt-pace-thumb-size);
}

.hmt-pace__track::before,
.hmt-pace__fill {
	position: absolute;
	top: 50%;
	left: 0;
	height: var(--hmt-pace-track-height);
	margin-top: calc(var(--hmt-pace-track-height) / -2);
	border-radius: 99px;
}

.hmt-pace__track::before {
	content: "";
	right: 0;
	background: var(--hmt-pace-track);
}

.hmt-pace__fill {
	width: var(--hmt-pace-pos);
	background: var(--hmt-pace-fill);
	transition: width var(--hmt-pace-duration) var(--hmt-pace-ease);
}

.hmt-pace__thumb {
	position: absolute;
	top: 50%;
	left: var(--hmt-pace-pos);
	box-sizing: border-box;
	width: var(--hmt-pace-thumb-size);
	height: var(--hmt-pace-thumb-size);
	margin: calc(var(--hmt-pace-thumb-size) / -2) 0 0 calc(var(--hmt-pace-thumb-size) / -2);
	border-radius: 50%;
	background: var(--hmt-pace-thumb);
	border: 3px solid var(--hmt-pace-thumb-ring);
	outline: 1px solid var(--hmt-pace-thumb-outline);
	pointer-events: none;
	transition:
		left var(--hmt-pace-duration) var(--hmt-pace-ease),
		transform 0.08s ease,
		box-shadow 0.12s ease;
}

.hmt-pace .hmt-pace__range {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	opacity: 0;
	cursor: pointer;
}

/* The native thumb is invisible but sized like the drawn one, since on touch
   devices it is the part that has to be dragged. */

/* WebKit / Blink */
.hmt-pace .hmt-pace__range::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	appearance: none;
	height: 100%;
	background: transparent;
	border: 0;
}

.hmt-pace .hmt-pace__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: var(--hmt-pace-thumb-size);
	height: var(--hmt-pace-thumb-size);
	border: 0;
	cursor: grab;
}

/* Firefox */
.hmt-pace .hmt-pace__range::-moz-range-track {
	height: 100%;
	background: transparent;
	border: 0;
}

.hmt-pace .hmt-pace__range::-moz-range-thumb {
	width: var(--hmt-pace-thumb-size);
	height: var(--hmt-pace-thumb-size);
	border: 0;
	cursor: grab;
}

.hmt-pace .hmt-pace__range:active {
	cursor: grabbing;
}

.hmt-pace__range:focus-visible ~ .hmt-pace__thumb {
	box-shadow: 0 0 0 4px var(--hmt-pace-focus);
}

.hmt-pace__range:active ~ .hmt-pace__thumb {
	transform: scale(1.08);
}

/* ------------------------------------------------------------ stop labels --- */

.hmt-pace__stops {
	display: flex;
	margin-top: calc(14px - (var(--hmt-pace-thumb-size) - var(--hmt-pace-track-height)) / 2);
}

/* Avada styles bare buttons fairly heavily, so this resets back to plain text. */
.hmt-pace .hmt-pace__stop,
.hmt-pace .hmt-pace__stop:hover,
.hmt-pace .hmt-pace__stop:focus,
.hmt-pace .hmt-pace__stop:active {
	-webkit-appearance: none;
	appearance: none;
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 2px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 500;
	color: var(--hmt-pace-ink-muted);
	cursor: pointer;
	transition: color 0.12s ease;
}

.hmt-pace .hmt-pace__stop:first-child {
	text-align: left;
}

.hmt-pace .hmt-pace__stop:last-child {
	text-align: right;
}

.hmt-pace .hmt-pace__stop:not(:first-child):not(:last-child) {
	text-align: center;
}

.hmt-pace .hmt-pace__stop:hover {
	color: var(--hmt-pace-ink);
}

.hmt-pace .hmt-pace__stop.is-active {
	font-weight: 700;
	color: var(--hmt-pace-ink);
}

.hmt-pace .hmt-pace__stop:focus-visible {
	outline: 2px solid var(--hmt-pace-ink);
	outline-offset: 2px;
}

/* ----------------------------------------------------------------- action --- */

.hmt-pace__action {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.hmt-pace .hmt-pace__button {
	display: inline-block;
}

/* Avada's button rules read their colours from these, so the planning button
   keeps the global size, shape and type and only changes colour. */
.hmt-pace .hmt-pace__planning {
	--button_gradient_top_color: var(--hmt-pace-planning);
	--button_gradient_bottom_color: var(--hmt-pace-planning);
	--button_gradient_top_color_hover: var(--hmt-pace-planning-hover);
	--button_gradient_bottom_color_hover: var(--hmt-pace-planning-hover);
	--button_accent_color: var(--hmt-pace-planning-ink);
	--button_accent_hover_color: var(--hmt-pace-planning-ink);
}

/* The scroll target gets a temporary tabindex so focus can follow the jump;
   it should not paint a focus ring around a whole page section. */
[data-hmt-pace-tabindex]:focus {
	outline: none;
}

/* ------------------------------------------------------------- background --- */

/* The layer is rendered inside the slider and moved to be the first child of
   the Avada container around it. Until then it stays hidden; its images still
   load. */
.hmt-pace .hmt-pace-bg {
	display: none;
}

/* A stacking context of its own lets the layer sit at z-index -1: above the
   container's own background, below everything in it. Avada's Pattern and
   Mask layers (z-index 6) still show over the images. */
.hmt-pace-host {
	isolation: isolate;
}

.hmt-pace-bg {
	--hmt-pace-ease: cubic-bezier(0.4, 0, 0.2, 1);

	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.hmt-pace-bg__stack {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}

.hmt-pace-bg .hmt-pace-bg__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: 50% 50%;
	opacity: 0;
	transition: opacity var(--hmt-pace-duration) var(--hmt-pace-ease);
}

.hmt-pace-bg .hmt-pace-bg__img.is-active {
	opacity: 1;
}

/* The overlay: the container's Background > Gradient, painted again over the
   images. The container's own paint of it is underneath them. */
.hmt-pace-bg::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-image: var(--awb-background-image, none);
}

@media (max-width: 480px) {
	.hmt-pace {
		--hmt-pace-thumb-size: 26px;
	}

	.hmt-pace .hmt-pace__stop {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hmt-pace__fill,
	.hmt-pace__thumb,
	.hmt-pace .hmt-pace__stop,
	.hmt-pace-bg .hmt-pace-bg__img {
		transition: none;
	}

	.hmt-pace__range:active ~ .hmt-pace__thumb {
		transform: none;
	}
}