:root {
	--cell-color-opacity: 0.6;
}

.tool-colour button.digit {
	position: relative;
	color: transparent;
}

.tool-colour button.digit:before,
.tool-colour button.digit:after {
	content: "";
	position: absolute;
	width: 60%; height: 60%;
	left: 20%; top: 20%;
	outline: 2px solid var(--controls-button-bg);
	outline-offset: -1px;
	background: var(--body-bg);
}
.tool-colour button.digit:hover:before,
.tool-colour button.digit:hover:after {
	outline-color: var(--controls-button-hover-bg);
}
.tool-colour button.digit:after { opacity: var(--cell-color-opacity); }

.tool-colour .controls-input button[data-control="delete"]
{
	flex: 0 0 4rem;
	width: 4rem;
}
.tool-colour .controls-input button[data-control="delete"] svg
{ transform: scale(0.8); }

/* Color edit mode */
.edit-colors button.digit:after { opacity: 0; }
.edit-colors .colorpicker {
	width: 0; height: 0;
	overflow: visible;
}
.edit-colors input[type="color"] {
	position: absolute;
	/*
	width: 60%; height: 60%;
	left: 20%; top: 20%;
	*/
	width: 2.4rem; height: 2.4rem;
	margin-left: calc(0.15rem + 0.8rem);
	margin-top: calc(0.15rem + 0.8rem);
	pointer-events: all;
	z-index: 10;
	opacity: var(--cell-color-opacity);
}

.tool-colour button[data-value="0"]:after { background: var(--cell-color-0); }
.tool-colour button[data-value="1"]:after { background: var(--cell-color-1); }
.tool-colour button[data-value="2"]:after { background: var(--cell-color-2); }
.tool-colour button[data-value="3"]:after { background: var(--cell-color-3); }
.tool-colour button[data-value="4"]:after { background: var(--cell-color-4); }
.tool-colour button[data-value="5"]:after { background: var(--cell-color-5); }
.tool-colour button[data-value="6"]:after { background: var(--cell-color-6); }
.tool-colour button[data-value="7"]:after { background: var(--cell-color-7); }
.tool-colour button[data-value="8"]:after { background: var(--cell-color-8); }
.tool-colour button[data-value="9"]:after { background: var(--cell-color-9); }

.tool-colour button[data-value="a"]:after { background: var(--cell-color-a); }
.tool-colour button[data-value="b"]:after { background: var(--cell-color-b); }
.tool-colour button[data-value="c"]:after { background: var(--cell-color-c); }
.tool-colour button[data-value="d"]:after { background: var(--cell-color-d); }
.tool-colour button[data-value="e"]:after { background: var(--cell-color-e); }
.tool-colour button[data-value="f"]:after { background: var(--cell-color-f); }
.tool-colour button[data-value="g"]:after { background: var(--cell-color-g); }
.tool-colour button[data-value="h"]:after { background: var(--cell-color-h); }
.tool-colour button[data-value="i"]:after { background: var(--cell-color-i); }
.tool-colour button[data-value="j"]:after { background: var(--cell-color-j); }

.tool-colour button[data-value="k"]:after { background: var(--cell-color-k); }
.tool-colour button[data-value="l"]:after { background: var(--cell-color-l); }
.tool-colour button[data-value="m"]:after { background: var(--cell-color-m); }
.tool-colour button[data-value="n"]:after { background: var(--cell-color-n); }
.tool-colour button[data-value="o"]:after { background: var(--cell-color-o); }
.tool-colour button[data-value="p"]:after { background: var(--cell-color-p); }
.tool-colour button[data-value="q"]:after { background: var(--cell-color-q); }
.tool-colour button[data-value="r"]:after { background: var(--cell-color-r); }
.tool-colour button[data-value="s"]:after { background: var(--cell-color-s); }
.tool-colour button[data-value="t"]:after { background: var(--cell-color-t); }

#cell-colors { opacity: var(--cell-color-opacity); }

.color-0 { fill: var(--cell-color-0); }
.color-1 { fill: var(--cell-color-1); }
.color-2 { fill: var(--cell-color-2); }
.color-3 { fill: var(--cell-color-3); }
.color-4 { fill: var(--cell-color-4); }
.color-5 { fill: var(--cell-color-5); }
.color-6 { fill: var(--cell-color-6); }
.color-7 { fill: var(--cell-color-7); }
.color-8 { fill: var(--cell-color-8); }
.color-9 { fill: var(--cell-color-9); }

.color-a { fill: var(--cell-color-a); }
.color-b { fill: var(--cell-color-b); }
.color-c { fill: var(--cell-color-c); }
.color-d { fill: var(--cell-color-d); }
.color-e { fill: var(--cell-color-e); }
.color-f { fill: var(--cell-color-f); }
.color-g { fill: var(--cell-color-g); }
.color-h { fill: var(--cell-color-h); }
.color-i { fill: var(--cell-color-i); }
.color-j { fill: var(--cell-color-j); }

.color-k { fill: var(--cell-color-k); }
.color-l { fill: var(--cell-color-l); }
.color-m { fill: var(--cell-color-m); }
.color-n { fill: var(--cell-color-n); }
.color-o { fill: var(--cell-color-o); }
.color-p { fill: var(--cell-color-p); }
.color-q { fill: var(--cell-color-q); }
.color-r { fill: var(--cell-color-r); }
.color-s { fill: var(--cell-color-s); }
.color-t { fill: var(--cell-color-t); }


:root {
	/* SudokuPad Legacy */
	--cell-color-0: transparent;

	--cell-color-1: rgb(214, 214, 214);
	--cell-color-2: rgb(124, 124, 124);
	--cell-color-3: rgb(-36, -36, -36);

	--cell-color-4: rgb(179, 229, 106);
	--cell-color-5: rgb(232, 124, 241);
	--cell-color-6: rgb(228, 150, 50);

	--cell-color-7: rgb(245, 58, 55);
	--cell-color-8: rgb(252, 235, 63);
	--cell-color-9: rgb(61, 153, 245);

/* 9.1 distinct */
	--cell-color-a: transparent;

	--cell-color-b: rgb(204, 51, 17);
	--cell-color-c: rgb(17, 119, 51);
	--cell-color-d: rgb(0, 68, 196);

	--cell-color-e: rgb(238, 153, 170);
	--cell-color-f: rgb(255, 255, 25);
	--cell-color-g: rgb(240, 70, 240);

	--cell-color-h: rgb(160, 90, 30);
	--cell-color-i: rgb(51, 187, 238);
	--cell-color-j: rgb(145, 30, 180);

/* Special use */
	--cell-color-k: transparent;

	--cell-color-l: rgb(245, 58, 55);
	--cell-color-m: rgb(76, 175, 80);
	--cell-color-n: rgb(61, 153, 245);

	--cell-color-o: rgb(249, 136, 134);
	--cell-color-p: rgb(149, 208, 151);
	--cell-color-q: rgb(158, 204, 250);

	--cell-color-r: rgb(170, 12, 9);
	--cell-color-s: rgb(47, 106, 49);
	--cell-color-t: rgb(9, 89, 170);

}