/* Normalize figure/figcaption width */
figure:has(image-compare) {
	inline-size: fit-content;
	margin-inline: auto;
	figcaption { contain: inline-size; }
}

image-compare {
	--exposure: 50%;
	--thumb-background-color: hsla(0, 0%, 100%, 0.9);
	/* --thumb-background-image: url(...); */
	--thumb-size: clamp(3em, 10vmin, 5em);
	--thumb-radius: 50%;
	--thumb-border-color: hsla(0, 0%, 0%, 0.9);
	--thumb-border-size: 2px;
	--focus-width: var(--thumb-border-size);
	--focus-color: hsl(200, 100%, 80%);
	--divider-width: 2px;
	--divider-color: hsla(0, 0%, 0%, 0.9);
	
	& {
		position: relative;
		display: flex;
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
		label {
			position: absolute;
			inset: 0;
			display: flex;
			align-items: stretch;
		}
		[type=range] {
			cursor: col-resize;
			appearance: none;
			-webkit-appearance: none;
			background: none;
			border: none;
			margin: 0 calc(var(--thumb-size) / -2);
			width: calc(100% + var(--thumb-size));
			height: unset;
		}
	}

	&:not(:defined) {
		flex-direction: row;
		overflow-x: auto;
		/* Scrollbar always visible on Mac OS (Chrome and Safari) */
		scrollbar-gutter: stable;
		/* margin-bottom: -6px; */
		margin-bottom: -3px; /* compromise */
		&::-webkit-scrollbar {
			-webkit-appearance: none;
			background-color: rgba(127,127,127,.10);
			border-bottom-left-radius: 8px;
			border-bottom-right-radius: 8px;
			border-radius: 1em;
		}
		&::-webkit-scrollbar-thumb {
			border-radius: 8px;
			background-color: rgba(127,127,127,.40);
			box-shadow: 0 0 1px rgba(127,127,127,1);
		}
	}

	&:defined {
		flex-direction: column;
		overflow: clip;
		.image-2-wrapper {
			position: absolute;
			top: 0;
			/* shadow used for vertical divider */
			filter: drop-shadow( calc(-1*var(--divider-width)) 0 0 var(--divider-color) );
			img {
				--_top-left: calc(var(--exposure) + var(--divider-width)/2);
				--_bottom-left: calc(var(--exposure) + var(--divider-width)/2);
				clip-path: polygon(var(--_top-left) 0, 100% 0, 100% 100%, var(--_bottom-left) 100%);
			}
		}
	}

	/* normalize images */
	img { display: block; max-width: 100%; height: auto; }

	/* adjacent figcaption */
	& + figcaption { margin-block-start: .5lh; }
	
	/* utils */
	.visually-hidden {
		position: absolute;
		width: 1px; height: 1px;
		padding: 0; margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap; /* added line */
		border: 0;
	}
}