/*
 * custom before/after slider, frontend styles
 *
 * design settings from the slider menu arrive as css custom properties
 * on the .cbas-slider element (inline style). every var() below has a
 * fallback, so sliders without custom settings just use the defaults.
 *
 * available variables:
 *   --cbas-line-color            divider line color, knob fill fallback (default #fff)
 *   --cbas-line-width            divider line thickness (default 2px)
 *   --cbas-radius                slider corner radius (default 0)
 *   --cbas-knob-size             knob diameter (default 34px)
 *   --cbas-knob-fill             knob fill color (default: follows line color)
 *   --cbas-knob-fill-opacity     knob fill opacity 0-100 (default 100)
 *   --cbas-knob-outline-color    knob outline color (default #fff)
 *   --cbas-knob-outline-width    knob outline width (default 0 = off)
 *   --cbas-knob-detail-opacity   outline and arrows opacity 0-100 (default 100)
 *   --cbas-arrow-color           arrow color (default #111)
 *   --cbas-label-color           label text color (default #fff)
 *   --cbas-label-bg              label box background (default rgba(0,0,0,0.5))
 *   --cbas-label-size            label font size (default 12px)
 *
 * everything not exposed in the menu (knob size, label padding, label
 * border, positions, shadows) is a plain value below and safe to edit.
 * overrides can also live in lay options -> custom css, they survive
 * plugin updates there.
 */

.cbas-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	user-select: none;
	/* touch-action none is required for pointer events to control
	   touch dragging instead of the page scrolling */
	touch-action: none;
	cursor: pointer;
	border-radius: var( --cbas-radius, 0 );
}

/* the after media defines the sliders size, the before media is
   layered on top and clipped */
.cbas-image img,
.cbas-image video {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

.cbas-image-after {
	position: relative;
	width: 100%;
}

.cbas-image-before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* cover means: if aspect ratios differ, the before media gets cropped
   to match the after media. identical resolutions align pixel perfect */
.cbas-image-before img,
.cbas-image-before video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* stylesheet fallback clip at 50 percent. the real initial position is
   rendered inline by php, this only catches edge cases where the inline
   style is missing */
.cbas-horizontal .cbas-image-before {
	clip-path: inset( 0 50% 0 0 );
}

.cbas-vertical .cbas-image-before {
	clip-path: inset( 0 0 50% 0 );
}

/* ---- divider line ---- */

.cbas-handle {
	position: absolute;
	background: var( --cbas-line-color, #fff );
	z-index: 10;
}

.cbas-horizontal .cbas-handle {
	top: 0;
	bottom: 0;
	width: var( --cbas-line-width, 2px );
	left: 50%;
	transform: translateX( -50% );
	cursor: ew-resize;
}

.cbas-vertical .cbas-handle {
	left: 0;
	right: 0;
	height: var( --cbas-line-width, 2px );
	top: 50%;
	transform: translateY( -50% );
	cursor: ns-resize;
}

/* round knob on the line, rendered by php only when enabled.
   built from two layers so fill and details can fade independently:
   ::before is the fill circle (fill color + fill opacity + shadow),
   ::after is the outline ring (outline color/width + detail opacity),
   the arrow svg sits on top (arrow color via currentColor + detail
   opacity). fill defaults to the line color when not set */
.cbas-knob {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var( --cbas-knob-size, 34px );
	height: var( --cbas-knob-size, 34px );
	transform: translate( -50%, -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --cbas-arrow-color, #111 );
	pointer-events: none;
}

.cbas-knob::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var( --cbas-knob-fill, var( --cbas-line-color, #fff ) );
	opacity: calc( var( --cbas-knob-fill-opacity, 100 ) / 100 );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.35 );
}

.cbas-knob::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: var( --cbas-knob-outline-width, 0 ) solid var( --cbas-knob-outline-color, #fff );
	opacity: calc( var( --cbas-knob-detail-opacity, 100 ) / 100 );
}

/* arrows scale with the knob, rotate for vertical sliders */
.cbas-arrows {
	position: relative;
	z-index: 1;
	width: 60%;
	height: 60%;
	opacity: calc( var( --cbas-knob-detail-opacity, 100 ) / 100 );
}

.cbas-vertical .cbas-arrows {
	transform: rotate( 90deg );
}

.cbas-handle:focus-visible {
	outline: 2px solid #007cba;
	outline-offset: 2px;
}

.cbas-slider.cbas-dragging {
	cursor: grabbing;
}

/* ---- labels (optional before/after overlay) ---- */

.cbas-label {
	position: absolute;
	z-index: 9;
	/* labels never block dragging */
	pointer-events: none;
	line-height: 1.4;
	font-size: var( --cbas-label-size, 12px );
	color: var( --cbas-label-color, #fff );
	background: var( --cbas-label-bg, rgba( 0, 0, 0, 0.5 ) );
	padding: 4px 10px;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	/* font-family inherits from the theme. lay theme note: lays global
	   reset forces font-weight normal with !important, so dont rely on
	   bold here */
	font-family: inherit;
	letter-spacing: 0.04em;
}

/* horizontal: before sits top left, after top right */
.cbas-horizontal .cbas-label-before {
	top: 12px;
	left: 12px;
}

.cbas-horizontal .cbas-label-after {
	top: 12px;
	right: 12px;
}

/* vertical: before sits top left, after bottom left */
.cbas-vertical .cbas-label-before {
	top: 12px;
	left: 12px;
}

.cbas-vertical .cbas-label-after {
	bottom: 12px;
	left: 12px;
}

/* ---- video: play/pause button (click mode only) ---- */

.cbas-play {
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 11;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.9 );
	color: #111;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.35 );
	padding: 0;
}

.cbas-play:hover {
	background: #fff;
}

/* icon swap: play icon by default, pause icon while playing */
.cbas-play .cbas-icon-pause {
	display: none;
}

.cbas-slider.cbas-playing .cbas-play .cbas-icon-play {
	display: none;
}

.cbas-slider.cbas-playing .cbas-play .cbas-icon-pause {
	display: block;
}