.a-flash-compare {
	--afc-position: 50%;
	--afc-color: #fff;
	--afc-line: 3px;
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #111;
	touch-action: auto;
}

.a-flash-compare img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

.a-flash-compare.is-loaded img { opacity: 1; }
.a-flash-compare__after { position: absolute; inset: 0; overflow: hidden; }
.a-flash-compare--horizontal .a-flash-compare__after { clip-path: inset(0 0 0 var(--afc-position)); }
.a-flash-compare--vertical .a-flash-compare__after { clip-path: inset(var(--afc-position) 0 0 0); }

.a-flash-compare__line {
	position: absolute;
	z-index: 3;
	display: none;
	pointer-events: none;
	background: var(--afc-color);
}

.a-flash-compare.is-loaded .a-flash-compare__line { display: block; }
.a-flash-compare--horizontal .a-flash-compare__line { left: var(--afc-position); top: 0; width: var(--afc-line); height: 100%; transform: translateX(-50%); }
.a-flash-compare--vertical .a-flash-compare__line { left: 0; top: var(--afc-position); width: 100%; height: var(--afc-line); transform: translateY(-50%); }
.a-flash-compare--fade .a-flash-compare__after { clip-path: none; opacity: var(--afc-fade, 0); }