/**
 * WooBricks — Slider Pro UI
 *
 * The slider base is the native Bricks slider (bricks-splide). These styles are
 * only for the Pro controls layer (pagination + pause/play) added by slider-pro.js.
 *
 * Vars (set via controls):
 *   --wbxe-sp-color    inactive bars/dots + idle text
 *   --wbxe-sp-active   active fill / dot / text
 *   --wbxe-sp-offset   distance from the slider edges
 */

.wbxe-slider-pro__controls {
	position: absolute;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 14px;
	pointer-events: none; /* let clicks pass through gaps; children re-enable */
}

.wbxe-slider-pro__controls > * {
	pointer-events: auto;
}

/* Positions */
.wbxe-slider-pro__controls--bottom-right  { right: var( --wbxe-sp-offset, 24px ); bottom: var( --wbxe-sp-offset, 24px ); }
.wbxe-slider-pro__controls--bottom-left   { left:  var( --wbxe-sp-offset, 24px ); bottom: var( --wbxe-sp-offset, 24px ); }
.wbxe-slider-pro__controls--top-right     { right: var( --wbxe-sp-offset, 24px ); top:    var( --wbxe-sp-offset, 24px ); }
.wbxe-slider-pro__controls--top-left      { left:  var( --wbxe-sp-offset, 24px ); top:    var( --wbxe-sp-offset, 24px ); }
.wbxe-slider-pro__controls--bottom-center { left: 50%; transform: translateX( -50% ); bottom: var( --wbxe-sp-offset, 24px ); }

/* =========================================================================
   Pause / Play
   ========================================================================= */

.wbxe-slider-pro__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --wbxe-sp-toggle-size, 28px );
	height: var( --wbxe-sp-toggle-size, 28px );
	padding: 0;
	border: 0;
	border-radius: var( --wbxe-sp-toggle-radius, 0 );
	background: var( --wbxe-sp-toggle-bg, none );
	cursor: pointer;
	color: var( --wbxe-sp-toggle-color, var( --wbxe-sp-active, #fff ) );
}

.wbxe-slider-pro__toggle svg {
	width: var( --wbxe-sp-toggle-icon, 18px );
	height: var( --wbxe-sp-toggle-icon, 18px );
	fill: currentColor;
}

/* =========================================================================
   Pagination
   ========================================================================= */

.wbxe-slider-pro__pagination {
	display: flex;
	align-items: center;
	gap: var( --wbxe-sp-gap, 6px );
}

.wbxe-slider-pro__page {
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	line-height: 0;
}

/* Dots */
.wbxe-slider-pro__pagination--dots .wbxe-slider-pro__page {
	width: var( --wbxe-sp-dot, 8px );
	height: var( --wbxe-sp-dot, 8px );
	border-radius: 50%;
	background: var( --wbxe-sp-color, rgba( 255, 255, 255, 0.4 ) );
	transition: background 0.2s ease;
}

.wbxe-slider-pro__pagination--dots .wbxe-slider-pro__page.is-active {
	background: var( --wbxe-sp-active, #fff );
}

/* Progress bars */
.wbxe-slider-pro__pagination--bars .wbxe-slider-pro__page {
	position: relative;
	width: var( --wbxe-sp-bar-w, 24px );
	height: var( --wbxe-sp-bar-h, 4px );
	border-radius: 2px;
	overflow: hidden;
	background: var( --wbxe-sp-color, rgba( 255, 255, 255, 0.35 ) );
	transition: width 0.35s ease, height 0.35s ease;
}

.wbxe-slider-pro__pagination--bars .wbxe-slider-pro__page.is-active {
	width: var( --wbxe-sp-bar-w-active, 48px );
}

.wbxe-slider-pro__fill {
	position: absolute;
	top: 0;
	left: 0;
	width: calc( var( --wbxe-sp-progress, 0 ) * 100% );
	height: 100%;
	background: var( --wbxe-sp-active, #fff );
}

/* =========================================================================
   Vertical slider (native direction: ttb) — stack controls, flip the fill axis
   ========================================================================= */

.wbxe-slider-pro--vertical .wbxe-slider-pro__controls,
.wbxe-slider-pro--vertical .wbxe-slider-pro__pagination {
	flex-direction: column;
}

/* Bars: long axis becomes vertical (bar-w → height, bar-h → thickness/width) */
.wbxe-slider-pro--vertical .wbxe-slider-pro__pagination--bars .wbxe-slider-pro__page {
	width: var( --wbxe-sp-bar-h, 4px );
	height: var( --wbxe-sp-bar-w, 24px );
}

.wbxe-slider-pro--vertical .wbxe-slider-pro__pagination--bars .wbxe-slider-pro__page.is-active {
	width: var( --wbxe-sp-bar-h, 4px );
	height: var( --wbxe-sp-bar-w-active, 48px );
}

.wbxe-slider-pro--vertical .wbxe-slider-pro__fill {
	width: 100%;
	height: calc( var( --wbxe-sp-progress, 0 ) * 100% );
}

/* =========================================================================
   Fraction (1 / 5)
   ========================================================================= */

.wbxe-slider-pro__fraction {
	display: flex;
	gap: 4px;
	color: var( --wbxe-sp-active, #fff );
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.wbxe-slider-pro__frac-sep,
.wbxe-slider-pro__frac-tot {
	opacity: 0.5;
}