/*
 * Локальный override стилей jcode:photo.comparison (см. template.php в этой же папке).
 * Подключается Bitrix'ом автоматически как ассет шаблона компонента.
 */

.jcode-photo-comparison {
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
	user-select: none;
	-webkit-user-select: none;
}

.jcode-photo-comparison,
.jcode-photo-comparison * {
	box-sizing: border-box;
}

.jcode-photo-comparison-center {
	margin: 0 auto;
}

.jcode-photo-comparison-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	line-height: 0;
}

.jcode-photo-comparison-before,
.jcode-photo-comparison-after {
	display: block;
}

.jcode-photo-comparison-before img,
.jcode-photo-comparison-after img {
	display: block;
	max-width: none;
	/* Картинки не обрезаются: ширина/высота всегда выставляются JS (setOffset())
	   так, чтобы у before и after был идентичный натуральный масштаб — object-fit
	   здесь намеренно не используется, чтобы никогда не кадрировать фото. */
	pointer-events: none;
}

.jcode-photo-comparison-before img {
	width: 100%;
	height: auto;
}

.jcode-photo-comparison-after {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 50%;
	overflow: hidden;
	transition: width 0.3s ease;
}

.jcode-photo-comparison-after img {
	height: auto;
	/* ширина в px проставляется JS под текущий clientWidth контейнера */
}

.jcode-photo-comparison-controller {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: var(--jcode-controller-width, 4px);
	max-width: 100%;
	height: 100%;
	background: var(--jcode-controller-color, #ffffff);
	cursor: ew-resize;
	touch-action: none; /* не даём странице скроллиться, пока тянем ползунок пальцем/пером */
	z-index: 1;
	transition: left 0.3s ease;
}

.jcode-photo-comparison-button {
	position: absolute;
	left: 50%;
	top: 10%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	background: var(--jcode-controller-color, #ffffff);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	touch-action: none;
	cursor: ew-resize;
}

.jcode-photo-comparison-button-left,
.jcode-photo-comparison-button-right {
	display: flex;
	align-items: center;
	cursor: pointer;
}

@media (max-width: 480px) {
	.jcode-photo-comparison-button {
		width: 40px;
		height: 40px;
		padding: 8px;
	}
}