/**
 * Custom Atomics for Elementor -- "Before / After" frontend and canvas styles.
 *
 * The element's own box -- display, width, overflow, and anything the user adds
 * on top -- comes from its atomic base style, so it stays editable from the
 * Style tab. Everything below positions the parts inside that box, which the
 * Style tab cannot address, and reads the per-instance values the widget writes
 * as custom properties on the element:
 *
 *   --dkae-ba-pos                    divider position, a percentage from the left
 *   --dkae-ba-accent                 handle colour
 *   --dkae-ba-line-color             seek bar colour
 *   --dkae-ba-line                   seek bar thickness
 *   --dkae-ba-handle-size            handle diameter
 *   --dkae-ba-handle-border-width    handle border width
 *   --dkae-ba-handle-border-color    handle border colour
 *   --dkae-ba-handle-radius          handle corner radius
 *   --dkae-ba-icon-color             handle icon colour
 *   --dkae-ba-label-bg               label background
 *   --dkae-ba-label-color            label text colour
 *   --dkae-ba-label-padding-block    label padding, top and bottom
 *   --dkae-ba-label-padding-inline   label padding, left and right
 *   --dkae-ba-label-border-width     label border width
 *   --dkae-ba-label-border-color     label border colour
 *   --dkae-ba-label-radius           label corner radius
 *   --dkae-ba-label-margin-top       label margin, one per side
 *   --dkae-ba-label-margin-right
 *   --dkae-ba-label-margin-bottom
 *   --dkae-ba-label-margin-left
 *
 * The remaining custom properties have no control behind them and exist so a
 * theme or custom CSS can adjust the details without overriding whole rules:
 * --dkae-ba-handle-contrast, --dkae-ba-icon-size, --dkae-ba-label-offset and
 * --dkae-ba-label-size.
 *
 * @package Deknows\Atomic_Elements
 */

.dkae-ba {
	--dkae-ba-pos: 50%;
	--dkae-ba-accent: #d32f2f;

	/* The seek bar follows the handle colour until it is given one of its own. */
	--dkae-ba-line-color: var(--dkae-ba-accent);
	--dkae-ba-line: 3px;

	--dkae-ba-handle-size: 48px;
	--dkae-ba-handle-contrast: #fff;
	--dkae-ba-handle-border-width: 2px;
	--dkae-ba-handle-border-color: var(--dkae-ba-handle-contrast);
	--dkae-ba-handle-radius: 50%;
	--dkae-ba-icon-size: calc(var(--dkae-ba-handle-size) * 0.42);

	/* The icon follows the handle's contrast colour until it is given one of
	   its own, so the default handle stays a single coherent mark. */
	--dkae-ba-icon-color: var(--dkae-ba-handle-contrast);

	--dkae-ba-label-bg: rgba(26, 42, 74, 0.9);
	--dkae-ba-label-color: #fff;
	--dkae-ba-label-padding-block: 8px;
	--dkae-ba-label-padding-inline: 14px;
	--dkae-ba-label-border-width: 0px;
	--dkae-ba-label-border-color: transparent;
	--dkae-ba-label-radius: 4px;
	--dkae-ba-label-margin-top: 0px;
	--dkae-ba-label-margin-right: 0px;
	--dkae-ba-label-margin-bottom: 0px;
	--dkae-ba-label-margin-left: 0px;
	--dkae-ba-label-offset: 16px;
	--dkae-ba-label-size: 13px;
}

.dkae-ba__frame {
	position: relative;
	overflow: hidden;

	/* The frame owns horizontal gestures; vertical ones stay with the page so a
	   visitor can still scroll with a finger on the image. */
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.dkae-ba__img {
	/* `block` also removes the inline descender gap under the image. */
	display: block;
	width: 100%;
	height: auto;

	/* Pointer events belong to the frame, not to the images: it keeps the drag
	   target whole and stops a browser starting its own image drag. */
	pointer-events: none;
	-webkit-user-drag: none;
}

/* The before image sits in flow and gives the frame its height. The after image
   is laid over it and clipped from the left, so the divider position is the
   only thing that decides how much of it shows. */
.dkae-ba__after {
	position: absolute;
	inset: 0;
	clip-path: inset(0 0 0 var(--dkae-ba-pos));
}

.dkae-ba__after .dkae-ba__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;

	/* The two images are rarely the exact same shape; cover keeps the after one
	   aligned with the before one rather than stretching it to fit. */
	object-fit: cover;
}

.dkae-ba__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--dkae-ba-pos);
	width: var(--dkae-ba-line);
	margin-left: calc(var(--dkae-ba-line) / -2);
	background: var(--dkae-ba-line-color);
	pointer-events: none;
	z-index: 2;
}

.dkae-ba__handle {
	position: absolute;
	top: 50%;
	left: var(--dkae-ba-pos);
	z-index: 3;
	box-sizing: border-box;
	width: var(--dkae-ba-handle-size);
	height: var(--dkae-ba-handle-size);
	margin: calc(var(--dkae-ba-handle-size) / -2) 0 0 calc(var(--dkae-ba-handle-size) / -2);
	display: flex;
	align-items: center;
	justify-content: center;

	/* Border-box above, so the border eats into the diameter rather than growing
	   the handle past the size that was asked for. */
	border: var(--dkae-ba-handle-border-width) solid var(--dkae-ba-handle-border-color);
	border-radius: var(--dkae-ba-handle-radius);
	background: var(--dkae-ba-accent);
	color: var(--dkae-ba-handle-contrast);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	cursor: ew-resize;

	/* The handle takes the gesture outright; releasing it to the page would end
	   the drag the moment a finger moved off the horizontal. */
	touch-action: none;
}

.dkae-ba__handle:focus-visible {
	outline: 2px solid var(--dkae-ba-accent);
	outline-offset: 3px;
}

/* Whatever the handle carries -- the built-in arrows, an icon-library glyph or
   an uploaded SVG -- goes in this box, so all three come out the same size
   whatever the handle diameter is. `font-size` is what sizes a glyph, and the
   width and height size an SVG, so the box sets all three to the same value.
   `color` does the same job for colour: a glyph follows it natively, and both
   the built-in arrows and an Elementor-inlined SVG are drawn with
   `fill="currentColor"`. */
.dkae-ba__icon {
	color: var(--dkae-ba-icon-color);
	display: flex;
	align-items: center;
	justify-content: center;

	/* Allowed to shrink but not to grow, so a thick handle border closes in on
	   the icon instead of pushing it out through the edge. */
	flex: 0 1 auto;
	width: var(--dkae-ba-icon-size);
	height: var(--dkae-ba-icon-size);
	max-width: 100%;
	max-height: 100%;
	font-size: var(--dkae-ba-icon-size);
	line-height: 1;
	pointer-events: none;
}

.dkae-ba__icon > i {
	font-size: inherit;
	line-height: 1;
}

.dkae-ba__icon > svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dkae-ba__label {
	position: absolute;
	top: var(--dkae-ba-label-offset);
	z-index: 2;
	box-sizing: border-box;
	max-width: calc(50% - var(--dkae-ba-label-offset) * 2);

	/* The label is absolutely positioned into a corner, so a margin shifts it
	   from where that corner put it. Which side moves it inward depends on the
	   corner, hence all four rather than a block/inline pair. */
	margin:
		var(--dkae-ba-label-margin-top)
		var(--dkae-ba-label-margin-right)
		var(--dkae-ba-label-margin-bottom)
		var(--dkae-ba-label-margin-left);
	padding: var(--dkae-ba-label-padding-block) var(--dkae-ba-label-padding-inline);
	border: var(--dkae-ba-label-border-width) solid var(--dkae-ba-label-border-color);
	border-radius: var(--dkae-ba-label-radius);
	background: var(--dkae-ba-label-bg);
	color: var(--dkae-ba-label-color);
	font-size: var(--dkae-ba-label-size);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	overflow-wrap: break-word;
	pointer-events: none;
}

.dkae-ba__label--before {
	left: var(--dkae-ba-label-offset);
}

.dkae-ba__label--after {
	right: var(--dkae-ba-label-offset);
}

/* Moving the divider is animated so a keyboard step and the return to the
   starting position read as movement rather than a jump. While a pointer is
   driving it the animation is dropped, because there the divider should sit
   under the finger and not trail behind it. */
.dkae-ba__after,
.dkae-ba__divider,
.dkae-ba__handle {
	transition: clip-path 120ms ease-out, left 120ms ease-out;
}

.dkae-ba.is-dkae-ba-active .dkae-ba__after,
.dkae-ba.is-dkae-ba-active .dkae-ba__divider,
.dkae-ba.is-dkae-ba-active .dkae-ba__handle {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.dkae-ba__after,
	.dkae-ba__divider,
	.dkae-ba__handle {
		transition: none;
	}
}