- let c = '#000080';

body(style=`--k: 50; --c: ${c}`)
	section
		div(style=`--mod: exclusion; --i: 0` data-mod='exclusion')
		div(style=`--mod: difference; --i: 1` data-mod='difference')
		input#k(type='range' aria-label='position (in percentages) of separator between the exclusion and difference blend mode results')
	form
		label.token--prop(for='c') background-color
		input#c(type='color' value=c)
		output.token--val(for='c') #{c}

$img: 'https://images.unsplash.com/photo-1590992133988-6ffb251c607e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNTk3ODMyOQ&ixlib=rb-1.2.1&q=80&w=1600';

$thumb-w: 5rem;
$thumb-r: .5*$thumb-w;
$thumb-l: 2px;
$thumb-c: #fff;

$arrow-s: 37.5%;
$arrow-a: 60deg;

$label-m: .5em;
$label-l: 11;

$pickr-d: 1.5em;

@mixin track() {
  &::-webkit-slider-runnable-track { @content }
  &::-moz-range-track { @content }
}

@mixin thumb() {
  &::-webkit-slider-thumb { @content }
  &::-moz-range-thumb { @content }
}

@mixin swatch() {
  &::-webkit-color-swatch { @content }
  &::-moz-color-swatch { @content }
}

* { box-sizing: inherit; margin: 0; padding: 0; background: transparent; font: inherit }

body {
	display: grid;
	overflow-x: hidden;
	min-height: 100vh;
	grid-template-rows: 1fr max-content;
	font: 1.25em/ 1.5 ubuntu mono, consolas, monaco, monospace;
	
	@media (max-width: 296px) { font-size: 1em }
	@media (max-width: 236px) { font-size: .75em }
}

section {
	display: grid;
	z-index: 2;
	height: calc(100vh - 3em - 1px);
	box-shadow: 0 4px 13px rgba(#000, .75);
	
	> * { grid-area: 1/ 1 }
}

div {
	--sgn-i: calc(2*var(--i) - 1);
	--not-i: calc(1 - var(--i));
	justify-self: center;
	position: relative;
	width: 100%;
	background: url($img) 50%/ cover var(--c);
	background-blend-mode: var(--mod);
	clip-path: inset(0 0 0 calc(var(--i)*var(--k)*1%));
	
	&::after {
		--dif-inf: clamp(0, calc(var(--k) - #{$label-l}), 1);
		--dif-sup: clamp(0, calc(100 - #{$label-l} - var(--k)), 1);
		position: absolute;
		top: $label-m;
		left: calc(var(--i)*100% - var(--sgn-i)*#{$label-m});
		padding: 0 .25em;
		border-radius: 5px;
		transform: translate(calc(var(--i)*-100%));
		box-shadow: 2px 2px 5px currentcolor;
		opacity: calc(var(--not-i)*var(--dif-inf) + var(--i)*var(--dif-sup));
		background: #72ae95;
		text-shadow: 1px 1px 1px #c7c7c7;
		content: attr(data-mod)
	}
}

input {
	cursor: pointer
}

[type='range'] {
	&, &::-webkit-slider-runnable-track, 
	&::-webkit-slider-thumb { -webkit-appearance: none }
	
	--p: calc(var(--b)*1%);
	z-index: 2;
	margin: 0 (-1*$thumb-r);
	height: 100%;
	
	&:focus { outline: none }
	
	@include track {
		border: none;
		width: 100%; height: 100%;
		background: transparent;
	}
	
	@include thumb {
		--list: #{$thumb-c} #{$arrow-a}, transparent 0%;
		border: none;
		width: $thumb-w; height: 100%;
		background: 
			conic-gradient(from 90deg - .5*$arrow-a, var(--list)) 
				0/ #{$arrow-s}, 
			conic-gradient(from -90deg - .5*$arrow-a, var(--list)) 
				100%/ #{$arrow-s}, 
			radial-gradient(circle, 
				transparent calc(#{$thumb-r} - #{$thumb-l} - 1px), 
				$thumb-c calc(#{$thumb-r} - #{$thumb-l}) calc(#{$thumb-r} - 1px), 
				transparent $thumb-r), 
			linear-gradient(
				$thumb-c calc(50% - #{$thumb-r} + .5*#{$thumb-l}), 
				transparent 0 calc(50% + #{$thumb-r} - .5*#{$thumb-l}), 
				$thumb-c 0) 50%/ #{$thumb-l};
		background-repeat: no-repeat;
		filter: drop-shadow(2px 2px 3px #000);
		cursor: ew-resize
	}
}

form, pre {
	--hl: 0;
	display: flex;
	align-items: center;
	padding: 1vw;
	background: #333;
	
	:not(input) {
		filter: grayScale(calc(1 - var(--hl)));
		transition: filter .3s
	}
	
	&:hover, &:focus-within { --hl: 1 }
}

.token {
	&--prop {
		color: #f5886b;
		
		&::after {
			color: #aaa;
			content: ':'
		}
	}
	
	&--val { color: #f1c972 }
}

[type='color'] {
	margin: 0 .25em;
	border: solid 1px currentcolor;
	width: $pickr-d; height: $pickr-d;
	border-radius: 50%;
	color: rgba(#aaa, var(--hl));
	filter: drop-shadow(2px 2px 5px #000);
	transition: color .3s;
	
	&::-webkit-color-swatch-wrapper {
		padding: 3px
	}
	
	@include swatch {
		border: solid 1px currentcolor;
		border-radius: 50%;
	}
	
	&:focus { outline: none }
}

addEventListener('input', e => {
	let _t = e.target, v = _t.value;
	
	document.body.style.setProperty(`--${_t.id}`, v);
	if(_t.type === 'color') _t.nextElementSibling.value = v;
})

/*
Created for my Taming Blend Modes: `difference` and `exclusion` (https://css-tricks.com/taming-blend-modes-difference-and-exclusion/) article on CSS-Tricks - check it out for context!
*/