/**
 * Antes/Depois - Comparação de imagens responsiva
 *
 * @package Impacta_Live
 */

.impacta-antes-depois {
	width: 100%;
	max-width: 100%;
	margin: 2rem 0;
	border-radius: 8px;
	overflow: hidden;
}

.impacta-antes-depois__container {
	position: relative;
	width: 100%;
	aspect-ratio: var(--impacta-antes-depois-ratio, 16 / 10);
	min-height: 200px;
	overflow: hidden;
	background: #111;
}

.impacta-antes-depois__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.impacta-antes-depois__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	vertical-align: middle;
}

.impacta-antes-depois__img--depois {
	z-index: 1;
}

.impacta-antes-depois__img--antes {
	z-index: 2;
	clip-path: inset(0 50% 0 0);
}

.impacta-antes-depois__slider {
	position: absolute;
	top: 0;
	left: 50%;
	width: 48px;
	height: 100%;
	background: transparent;
	z-index: 3;
	cursor: ew-resize;
	touch-action: none;
	transform: translateX(-50%);
	transition: opacity 0.2s;
}

.impacta-antes-depois__slider::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 4px;
	height: 100%;
	background: #fff;
	transform: translateX(-50%);
	transition: background 0.2s;
}

.impacta-antes-depois__slider:hover,
.impacta-antes-depois__slider:focus {
	opacity: 1;
	outline: none;
}

.impacta-antes-depois__slider:hover::before,
.impacta-antes-depois__slider:focus::before {
	background: rgba(255, 255, 255, 0.9);
}

.impacta-antes-depois__slider:focus-visible {
	box-shadow: 0 0 0 2px currentColor;
}

.impacta-antes-depois__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: ew-resize;
	pointer-events: auto !important;
	touch-action: none;
}

.impacta-antes-depois__arrows {
	display: inline-block;
	width: 12px;
	height: 20px;
	background: linear-gradient(to right, transparent 33%, #333 33%, #333 66%, transparent 66%);
	background-size: 4px 100%;
	background-repeat: repeat-x;
	background-position: center;
}

.impacta-antes-depois__arrows::before,
.impacta-antes-depois__arrows::after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border: 6px solid transparent;
}

@media (max-width: 640px) {
	.impacta-antes-depois__container {
		min-height: 180px;
	}

	.impacta-antes-depois__slider {
		width: 40px;
	}

	.impacta-antes-depois__handle {
		width: 40px;
		height: 40px;
		margin: -20px 0 0 -20px;
	}
}