<p class='no-support'>Sorry, it appears your browser does not support the <code>color-mix()</code> function 😿</p>
<p class='ff-support'>It appears you're on Firefox, but don't have the <code>color-mix</code> flag enabled. To change this, go to <code>about:config</code> and set the <code>layout.css.color-mix.enabled</code> flag to <code>true</code> 😼</p>
<article>
	<p>Using <code>calc()</code> value for amount:</p>
	<style contenteditable id='test-box-1'>#test-box-1 {
	--v: 20;
	background: color-mix(in lch, purple calc(var(--v)*1%), gold)
}</style>
</article>
<article>
	<p>Nesting <code>color-mix()</code> functions:</p>
	<style contenteditable id='test-box-2'>#test-box-2 {
	background: color-mix(in srgb, color-mix(in srgb, purple, mediumvioletred), gold)
}</style>
</article>
<article>
	<p>Using a <code>var()</code> for what we mix:</p>
	<style contenteditable id='test-box-3'>#test-box-3 {
	--c: crimson;
	background: color-mix(in lab, var(--c), gold)
}</style>
</article>
<article>
	<p>Using a <code>color-mix()</code> value in a gradient:</p>
	<style contenteditable id='test-box-4'>#test-box-4 {
	background: linear-gradient(90deg, hotpink, color-mix(in lch, purple 20%, gold))
}</style>
</article>

html, body, style { display: grid }

body {
	font: 1.25em ubuntu, trebuchet ms, sans-serif
}

code, style {
	font: 1em ubuntu mono, consolas, monaco, monospace
}

code { color: purple }

style {
	tab-size: 2;
	white-space: pre
}

[class*='-support'] { padding: .25em }

.no-support { background: tomato }

.ff-support {
	background: gold;
	display: none
}

@supports (background: -moz-element(#c)) {
	.no-support { display: none }
	.ff-support { display: block }
}

@supports (background: color-mix(in lch, red, tan)) {
	.no-support { display: none }
	.ff-support { display: none }
}