svg(aria-hidden='true' width='0' height='0')
	filter#grad(color-interpolation-filters='sRGB')
		feColorMatrix(values=`0  0 0 0 0 
		                      0  0 0 0 0 
												  0  0 0 0 0
												  0 -1 0 0 1` result='basemode')
		feFlood(flood-color='var(--grad-0)' result='baseback')
		feColorMatrix(in='SourceGraphic'
		              values=`0 0 0 0 0 
		                      0 0 0 0 0 
												  0 0 0 0 0
												  1 0 0 0 0` result='basegrad')
		feFlood(flood-color='var(--link-0)')
		feComposite(in2='basegrad' operator='in')
		feBlend(in2='baseback')
		feComposite(in2='SourceAlpha' operator='in' result='basebttn')
		feColorMatrix(in='SourceGraphic'
		              values=`0 0 0 0 0 
		                      0 0 0 0 0 
												  0 0 0 0 0
												  0 0 1 0 0` result='basetext')
		feFlood(flood-color='var(--text-1)')
		feComposite(in2='basetext' operator='in')
		feBlend(in2='basebttn')
		feComposite(in2='basemode' operator='in' result='basefull')
		
		feFlood(flood-color='var(--grad-1)' result='darkback')
		feFlood(flood-color='var(--link-1)')
		feComposite(in2='basegrad' operator='in')
		feBlend(in2='darkback')
		feComposite(in2='SourceAlpha' operator='in' result='darkbttn')
		feFlood(flood-color='var(--text-0)')
		feComposite(in2='basetext' operator='in')
		feBlend(in2='darkbttn')
		feComposite(in2='basemode' operator='out')
		feBlend(in='basefull')

header: h1 I am a heading contrasting with the background

main
	p I am a paragraph with a 
		a(href='#') link
		| .
	button: span I am a gradient button

aside
	input#light(type='radio' name='theme' checked)
	label(for='light' data-ico='☀️') light
	input#dark(type='radio' name='theme')
	label(for='dark' data-ico='🌙') dark

$line-w: 2px;
$dots-s: 1em;

$back-0: #dbdce0; // light theme background
$back-1: #39393c; // dark theme background
$text-0: $back-1; // light theme text
$text-1: $back-0; // dark theme text
$link-0: #573cff; // light theme links + selected toggles
$link-1: #00f1fd; // light theme links + selected toggles
$grad-0: #c50055;
$grad-1: #f67280;

@property --perc {
	syntax: '<length-percentage>';
	initial-value: 0px;
	inherits: true
}

@property --hov {
	syntax: '<number>';
	initial-value: 0;
	inherits: true
}

@property --sel {
	syntax: '<number>';
	initial-value: 0;
	inherits: true
}

* { color: #0000; font: inherit }

html, body, header { display: grid }

body {
	--dark: 0;
	--perc: calc(var(--dark, 0)*100%);
	/* Chrome stabele without flag still needs this fallback */
	--sign: calc(2*var(--dark) - 1);
	--ang: calc(var(--sign)*90deg);
	--full: linear-gradient(red 0 0);
	
	--text-0: #{$text-0};
	--text-1: #{$text-1};
	--link-0: #{$link-0};
	--link-1: #{$link-1};
	--grad-0: #{$grad-0};
	--grad-1: #{$grad-1};	
	
	place-items: center;
	margin: 0;
	background: 
		radial-gradient($line-w, 
				hsla(0, 0%, 100%, .1) calc(100% - 1px), transparent) 
			0/ #{$dots-s $dots-s}, 
		linear-gradient(var(--ang), 
				$back-1 var(--perc), $back-0 0) fixed;
	background-blend-mode: difference;
	font: 1.25em/ 1.25 sans-serif;
	transition: --perc .65s ease-out;
	
	&:has(#dark:checked) { --dark: 1 }
	
	/* if sign() is supported */
	@supports (scale: Sign(-1)) {
		--sign: sign(var(--dark) - .5)
	}
}

aside {
	display: flex;
	grid-row: 1
}

header {
	justify-self: stretch;
	min-height: 6lh;
	background: 
		linear-gradient(var(--ang), #fff var(--perc), #000 0) fixed,
		linear-gradient(45deg, $back-1 calc(50% - 5em), $back-0 0 calc(50% + 5em), $back-1 0), 
		url(https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=2400) 50%/ cover $back-1;
	background-blend-mode: difference, difference, multiply;
	text-align: center;
}

h1 {
	place-self: center;
	margin: .5em;
	color: #fff;
	font-size: 2.5em;
	font-weight: 900;
	text-wrap: balance;
	mix-blend-mode: difference
}

p {
	background: 
		linear-gradient(var(--ang), 
				var(--text-1) var(--perc), var(--text-0) 0) text fixed;
	isolation: isolate
}

:is(a, input):focus { outline: none }

a, button, label {
	--hov: 0;
	transition: --hov .35s ease-out;
	cursor: pointer
}

/* switch --hov to 1 in hover/ focus case */
:is(:hover, :focus), :is(:hover, :focus) + label, label:hover { --hov: 1 }

a {
	--pos: calc((1 - var(--hov))*(100% - #{$line-w}));
	position: relative;
	display: inline-block;
	padding: 0 $line-w;
	background: 
		linear-gradient(#fff var(--pos), #000 0), 
		linear-gradient(var(--ang), 
				$link-1 var(--perc), invert($link-0) 0) text fixed, 
		linear-gradient(#fff var(--pos), #000 0), 
		linear-gradient(var(--ang), 
				#fff var(--perc), #000 0) text fixed;
	background-clip: text;
	background-blend-mode: exclusion, exclusion, darken;
	
	&::before, &::after {
		position: absolute;
		z-index: 1;
		inset: 0;
		background: 
			linear-gradient(var(--ang), 
				$link-1 var(--perc), invert($link-0) 0) fixed;
		mix-blend-mode: difference;
		pointer-events: none;
		mask: linear-gradient(#0000 var(--pos), red 0);
		content: ''
	}
	
	&::after {		
		background-image: 
			linear-gradient(var(--ang), 
					#000 var(--perc), #fff 0)
	}
}

button {
	border: none;
	padding: .25em .75em;
	border-radius: 1lh;
	background: 
		linear-gradient(var(--ang), 
				#0f0 var(--perc), #000 0) fixed, 
		linear-gradient(45deg, #000, #f00);
	background-blend-mode: lighten;
	filter: url(#grad) sepia(calc(var(--hov)*.5));
	
	span {
		color: #00f;
		mix-blend-mode: lighten
	}
}

[type='radio'] {
	position: absolute;
	opacity: .001
}

label {
	--sel: 0;
	--perc-sel: calc(var(--sel)*100%);
	--perc-hov: calc(var(--hov)*100%);
	--lght-c: color-mix(in srgb, var(--link-0) var(--perc-sel), var(--text-0));
	--dark-c: color-mix(in srgb, var(--link-1) var(--perc-sel), var(--text-1));
	position: relative;
	margin: .5em;
	padding: calc(.5em + #{$line-w});
	background: 
		linear-gradient(var(--ang), 
				var(--dark-c) var(--perc), var(--lght-c) 0) text fixed;
	transition-property: --hov, --sel;
	
	&::before {
		margin-right: .5em;
		content: attr(data-ico)
	}
	
	/* hover/ focus outline */
	&::after {
		position: absolute;
		inset: 0;
		padding: $line-w;
		background: 
			linear-gradient(var(--ang), 
					color-mix(in srgb, var(--dark-c) var(--perc-hov), #0000) var(--perc), 
					color-mix(in srgb, var(--lght-c) var(--perc-hov), #0000) 0) fixed;
		mask: var(--full) exclude, var(--full) content-box;		
		content: ''
	}
	
	/* switch --sel to 1 if its radio/ checkbox is checked */
	:checked + & { --sel: 1 }
}