/*
Colors were chosen in Lab using https://nixsensor.com/free-color-converter/
D50 2deg illuminant, L in [0,100], a and b in [-128, 128]
0 = lab(85,0,85)
1 = lab(85,80,30)
2 = lab(85,-40,40)
3 = lab(85,-50,0)
4 = lab(85,5,15)
5 = lab(85,-10,-50)
6 = lab(85,35,-15)

For darkmode:
0 = oklab(50%   0%  108%)
1 = oklab(50% -51%   51%)
2 = oklab(50% -64%  -20%)
3 = oklab(50%   6%   19%)
4 = oklab(50% -12%  -64%)
5 = oklab(50%  44%  -19%)  
6 = oklab(50% 102%   38%)
*/

[data-algorithm] var { cursor: pointer; }
var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); }

var[data-var-color] { --var-bg: #F4D200; }
var[data-var-color="1"] { --var-bg: #FF87A2; }
var[data-var-color="2"] { --var-bg: #96E885; }
var[data-var-color="3"] { --var-bg: #3EEED2; }
var[data-var-color="4"] { --var-bg: #EACFB6; }
var[data-var-color="5"] { --var-bg: #82DDFF; }
var[data-var-color="6"] { --var-vg: #FFBCF2; }

@media (prefers-color-scheme: dark) {
	var[data-var-color] { --var-bg: #bc1a00; }
	var[data-var-color="1"] { --var-bg: #007f00; }
	var[data-var-color="2"] { --var-bg: #008698; }
	var[data-var-color="3"] { --var-bg: #7f5b2b; }
	var[data-var-color="4"] { --var-bg: #004df3; }
	var[data-var-color="5"] { --var-bg: #a1248a; }
	var[data-var-color="6"] { --var-vg: #ff0000; }
}