/**
 * RWO Drag Scroll
 *
 * Everything is scoped to .rwo-drag-scroll so the plugin is inert until the
 * class is added to a container.
 */

.rwo-drag-scroll,
.rwo-drag-scroll-yes {
	--rwo-ds-bar-height: 4px;
	--rwo-ds-bar-track: rgba(0, 0, 0, 0.08);
	--rwo-ds-bar-thumb: rgba(0, 0, 0, 0.55);
	--rwo-ds-bar-radius: 4px;
	--rwo-ds-bar-gap: 12px;
	--rwo-ds-badge-size: 92px;
	--rwo-ds-badge-bg: #ffffff;
	--rwo-ds-badge-colour: #000000;
	--rwo-ds-duration: 0.35s;

	/* Stop the browser's horizontal overscroll gesture (back-navigation). */
	overscroll-behavior-x: contain;

	/* The easing is driven per frame in JS; a CSS smooth scroll on top of it
	 * fights the animation and produces exactly the stepping it is meant to
	 * remove. */
	scroll-behavior: auto;

	/* The native bar is replaced by the one this plugin draws. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.rwo-drag-scroll::-webkit-scrollbar,
.rwo-drag-scroll-yes::-webkit-scrollbar {
	display: none;
}

/* ------------------------------------------------------------ Scrollbar -- */

.rwo-ds__bar {
	position: relative;
	width: 100%;
	height: var(--rwo-ds-bar-height, 4px);
	margin-top: var(--rwo-ds-bar-gap, 12px);
	background: var(--rwo-ds-bar-track, rgba(0, 0, 0, 0.08));
	border-radius: var(--rwo-ds-bar-radius, 4px);
	opacity: 0;
	transition: opacity var(--rwo-ds-duration, 0.35s) ease;
	pointer-events: none;
}

/* Shown while scrolling or hovering, then faded back out — same as the
 * reference, which runs Swiper's scrollbar with hide:true. */
.rwo-ds__bar.is-active {
	opacity: 1;
}

.rwo-ds__thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--rwo-ds-bar-thumb, rgba(0, 0, 0, 0.55));
	border-radius: inherit;
	transform: translateX(0);
	will-change: transform, width;
}

/* ---------------------------------------------------------------- Badge -- */

.rwo-ds__badge {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9997;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: var(--rwo-ds-badge-size, 92px);
	height: var(--rwo-ds-badge-size, 92px);
	border-radius: 50%;
	background: var(--rwo-ds-badge-bg, #fff);
	color: var(--rwo-ds-badge-colour, #000);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.8);
	transition: opacity var(--rwo-ds-duration, 0.35s) ease,
		transform var(--rwo-ds-duration, 0.35s) ease;
}

.rwo-ds__badge.is-visible {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.rwo-ds__badge-arrows {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	line-height: 1;
}

/* While dragging, the badge tightens up for feedback. */
.rwo-ds__badge.is-grabbing {
	transform: translate(-50%, -50%) scale(0.9);
}

/* The badge replaces the cursor, so hide the real one over the track. */
.rwo-drag-scroll.rwo-ds-has-badge,
.rwo-drag-scroll-yes.rwo-ds-has-badge {
	cursor: none;
}

.rwo-drag-scroll.is-grabbing,
.rwo-drag-scroll-yes.is-grabbing {
	user-select: none;
}

/* Links inside would otherwise fight the drag. */
.rwo-drag-scroll.is-grabbing a,
.rwo-drag-scroll.is-grabbing img {
	pointer-events: none;
}

/* Touch devices get native momentum scrolling and no badge. */
@media (hover: none) {
	.rwo-ds__badge {
		display: none;
	}

	.rwo-drag-scroll.rwo-ds-has-badge {
		cursor: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rwo-ds__bar,
	.rwo-ds__badge {
		transition-duration: 0.01ms;
	}
}

/* ------------------------------------------------- Auto layout option -- */
/*
 * Saves setting row / nowrap / overflow by hand on every container. Children
 * are stopped from shrinking, which is what makes the row overflow at all.
 */

.rwo-drag-scroll.rwo-drag-scroll--auto,
.rwo-drag-scroll-yes.rwo-ds-auto-yes {
	/*
	 * Elementor drives container layout AND overflow through custom properties
	 * (.e-con { overflow: var(--overflow) }). Setting the plain properties loses
	 * to its own rules, so drive the variables. Without --overflow the container
	 * computes to `visible`, nothing is scrollable, and drag/wheel/scrollbar all
	 * silently do nothing.
	 */
	--flex-direction: row;
	--flex-wrap: nowrap;
	--overflow: auto !important;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-x: auto;
}

.rwo-drag-scroll.rwo-drag-scroll--auto > .e-con,
.rwo-drag-scroll.rwo-drag-scroll--auto > .elementor-element,
.rwo-drag-scroll.rwo-drag-scroll--auto > .e-con-inner > .e-con,
.rwo-drag-scroll-yes.rwo-ds-auto-yes > .e-con,
.rwo-drag-scroll-yes.rwo-ds-auto-yes > .elementor-element,
.rwo-drag-scroll-yes.rwo-ds-auto-yes > .e-con-inner > .e-con {
	flex-shrink: 0;
}

/* ------------------------------------- Editor parity for the scrollbar -- */
/*
 * The editor renders containers from JS templates, so it never sees the
 * data-ds-* attributes the behaviour reads. These prefix classes are applied by
 * Elementor on both sides, so the bar looks the same while editing as it does
 * live.
 */

.rwo-ds-baralways-yes + .rwo-ds__bar {
	opacity: 1;
}

.rwo-drag-scroll-yes:not(.rwo-ds-bar-yes) + .rwo-ds__bar {
	display: none;
}