/**
 * Comparaison d'images (Avant / Après) – styles scopés au widget.
 * Variables : --eic-bar-color, --eic-bar-thickness, --eic-handle-color, --eic-handle-size
 *
 * @package EIC_Image_Comparison
 */

/* Wrapper alignement (contenu centré par défaut) */
.eic-comparison-wrapper {
	display: block;
	width: 100%;
}

.eic-comparison-inner {
	position: relative;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	user-select: none;
	touch-action: none;
}

/* RTL: miroir horizontal du conteneur */
[dir="rtl"] .eic-comparison-inner {
	direction: ltr;
}

/* Couche « avant » dans le flux pour définir la hauteur du bloc */
.eic-comparison-inner .eic-layer.eic-before {
	position: relative;
	z-index: 1;
	pointer-events: none;
}

.eic-comparison-inner .eic-layer.eic-before img {
	display: block;
	width: 100%;
	height: auto;
	vertical-align: middle;
}

/* Couche « après » en overlay */
.eic-comparison-inner .eic-layer.eic-after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
	clip-path: inset(0 0 0 50%);
}

.eic-comparison-inner .eic-layer.eic-after img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: middle;
}


/* Barre centrale (divider) */
.eic-comparison-inner .eic-divider {
	position: absolute;
	z-index: 3;
	background-color: var(--eic-bar-color, #fff);
	cursor: ew-resize;
	pointer-events: auto;
}

.eic-comparison-inner[data-orientation="horizontal"] .eic-divider {
	top: 0;
	bottom: 0;
	width: var(--eic-bar-thickness, 4px);
	left: 50%;
	transform: translateX(-50%);
}

.eic-comparison-inner[data-orientation="vertical"] .eic-divider {
	left: 0;
	right: 0;
	height: var(--eic-bar-thickness, 4px);
	top: 50%;
	transform: translateY(-50%);
	cursor: ns-resize;
}

/* RTL: position initiale gérée par JS */
.eic-comparison-inner[data-orientation="horizontal"][data-rtl="1"] .eic-divider {
	left: auto;
	right: 50%;
	transform: translateX(50%);
}

/* Poignée (handle) */
.eic-comparison-inner .eic-handle {
	position: absolute;
	z-index: 4;
	width: var(--eic-handle-size, 48px);
	height: var(--eic-handle-size, 48px);
	margin-left: calc(-1 * var(--eic-handle-size, 48px) / 2);
	margin-top: calc(-1 * var(--eic-handle-size, 48px) / 2);
	border: 2px solid var(--eic-handle-color, #fff);
	background: transparent;
	border-radius: 50%;
	cursor: ew-resize;
	pointer-events: auto;
	box-sizing: border-box;
	transition: box-shadow 0.2s ease;
}

.eic-comparison-inner .eic-handle:hover,
.eic-comparison-inner .eic-handle:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

.eic-comparison-inner[data-orientation="vertical"] .eic-handle {
	cursor: ns-resize;
	margin-left: calc(-1 * var(--eic-handle-size, 48px) / 2);
	margin-top: calc(-1 * var(--eic-handle-size, 48px) / 2);
}

.eic-comparison-inner[data-orientation="horizontal"][data-rtl="1"] .eic-handle {
	margin-left: calc(-1 * var(--eic-handle-size, 48px) / 2);
	margin-right: 0;
}

/* Flèches visuelles sur la poignée (optionnel, améliore l’UX) */
.eic-comparison-inner .eic-handle::before,
.eic-comparison-inner .eic-handle::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	transform: translateY(-50%);
}

.eic-comparison-inner .eic-handle::before {
	left: 8px;
	border-right-color: var(--eic-handle-color, #fff);
	border-left-width: 0;
}

.eic-comparison-inner .eic-handle::after {
	right: 8px;
	border-left-color: var(--eic-handle-color, #fff);
	border-right-width: 0;
}

.eic-comparison-inner[data-orientation="vertical"] .eic-handle::before,
.eic-comparison-inner[data-orientation="vertical"] .eic-handle::after {
	left: 50%;
	top: auto;
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: transparent;
	border-bottom-color: transparent;
	transform: translateX(-50%);
}

.eic-comparison-inner[data-orientation="vertical"] .eic-handle::before {
	top: 8px;
	border-bottom-color: var(--eic-handle-color, #fff);
	border-top-width: 0;
}

.eic-comparison-inner[data-orientation="vertical"] .eic-handle::after {
	bottom: 8px;
	top: auto;
	border-top-color: var(--eic-handle-color, #fff);
	border-bottom-width: 0;
}

/* RTL horizontal: inverser les flèches */
.eic-comparison-inner[data-orientation="horizontal"][data-rtl="1"] .eic-handle::before {
	border-right-color: transparent;
	border-left-color: var(--eic-handle-color, #fff);
	border-left-width: 6px;
	border-right-width: 0;
	left: auto;
	right: 8px;
}

.eic-comparison-inner[data-orientation="horizontal"][data-rtl="1"] .eic-handle::after {
	border-left-color: transparent;
	border-right-color: var(--eic-handle-color, #fff);
	border-right-width: 6px;
	border-left-width: 0;
	right: auto;
	left: 8px;
}