:root {
	--iconSize: 85px;
}

.colorSwatchContainer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	gap: calc(0.1 * var(--iconSize)) calc(0.1 * var(--iconSize)); /* row-gap column-gap */
	padding: 0.6em;
}

.colorSwatch {
	width: var(--iconSize);
	height: var(--iconSize);
	position: relative;
	background-blend-mode: multiply;
	border-radius: 50%;
	transition: border-radius 0.2s ease-out, box-shadow 0.25s ease-out, color 0.15s ease-in-out, text-shadow 0.2s ease-in-out;
	background-size: contain;
	background-repeat: no-repeat;
	text-align: center;
	font-size: calc(0.165 * var(--iconSize));
	line-height: calc(0.18 * var(--iconSize));
	box-sizing: border-box;
	padding: calc(0.08 * var(--iconSize));
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	box-shadow: 0 0 calc(0.075 * var(--iconSize)) #00000066;
}

.colorSwatch.whiteText { color: #ffffff00; text-shadow: #00000000 0px 0 calc(0.05 * var(--iconSize)); }
.colorSwatch.blackText { color: #00000000; text-shadow: #ffffff00 0px 0 calc(0.05 * var(--iconSize)); font-weight: bold; }

.colorSwatch::before, .colorSwatch::after {
	content: '';
	width: var(--iconSize);
	height: var(--iconSize);
	position: absolute;
	top: 0;
	left: 0;
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 50%;
}

.colorSwatch::before {
	mix-blend-mode: color-dodge;
	opacity: 0.5;
}

.colorSwatch::after {
	mix-blend-mode: screen;
	opacity: 0.58;
}

.colorSwatch.standard		{ background-image: url('../images/colorSwatchSpheres/standard/Diffuse_Direct_001.png'); }
.colorSwatch.standard::before	{ background-image: url('../images/colorSwatchSpheres/standard/Specular_Direct_Rho.png'); }
.colorSwatch.standard::after	{ background-image: url('../images/colorSwatchSpheres/standard/Specular_Shading_001.png'); }

.colorSwatch.smooth		{ background-image: url('../images/colorSwatchSpheres/smooth/Diffuse_Direct_001.png'); }
.colorSwatch.smooth::before	{ background-image: url('../images/colorSwatchSpheres/smooth/Specular_Direct_Rho.png'); }
.colorSwatch.smooth::after	{ background-image: url('../images/colorSwatchSpheres/smooth/Specular_Shading_001.png'); }

.colorSwatch.matte		{ background-image: url('../images/colorSwatchSpheres/matte/Diffuse_Direct_001.png'); }
.colorSwatch.matte::before	{ background-image: url('../images/colorSwatchSpheres/matte/Specular_Direct_Rho.png'); }
.colorSwatch.matte::after	{ background-image: url('../images/colorSwatchSpheres/matte/Specular_Shading_001.png'); opacity: 1; }

.colorSwatch.textured		{ background-image: url('../images/colorSwatchSpheres/textured/Diffuse_Direct_001.png'); }
.colorSwatch.textured::before	{ background-image: url('../images/colorSwatchSpheres/textured/Specular_Direct_Rho.png'); opacity: 0.4; }
.colorSwatch.textured::after	{ background-image: url('../images/colorSwatchSpheres/textured/Specular_Shading_001.png'); opacity: 0.7; }

.colorSwatch.galvalume		{ background-image: url('../images/colorSwatchSpheres/galvalume/Diffuse_Direct_001.png'); }
.colorSwatch.galvalume::before	{ background-image: url('../images/colorSwatchSpheres/galvalume/Specular_Direct_Rho.png'); opacity: 0.4; }
.colorSwatch.galvalume::after	{ background-image: url('../images/colorSwatchSpheres/galvalume/Specular_Shading_001.png'); opacity: 0.7; }

.colorSwatch.woodgrain		{ background-image: url('../images/colorSwatchSpheres/woodgrain/Diffuse_Direct_001.png'); }
.colorSwatch.woodgrain::before	{ background-image: url('../images/colorSwatchSpheres/woodgrain/Specular_Direct_Rho.png'); opacity: 0.6; }
.colorSwatch.woodgrain::after	{ background-image: url('../images/colorSwatchSpheres/woodgrain/Specular_Shading_001.png'); opacity: 1; }

.colorSwatch.brick		{ background-image: url('../images/ui/Brick.jpg'); background-blend-mode: normal; background-size: auto 200%; font-size: calc(0.25 * var(--iconSize)); line-height: calc(0.23 * var(--iconSize)); }
.colorSwatch.stone		{ background-image: url('../images/ui/StackedStone.jpg'); background-blend-mode: normal; background-size: auto 200%; font-size: calc(0.25 * var(--iconSize)); line-height: calc(0.23 * var(--iconSize)); }

.colorSwatch.selected, .colorSwatch:hover { border-radius: 0; box-shadow: inset 0 0 calc(0.03 * var(--iconSize)) 0 #aaa; cursor: pointer; }
.colorSwatch.selected.whiteText, .colorSwatch.whiteText:hover { color: white; text-shadow: #000 0px 0 calc(0.05 * var(--iconSize)); }
.colorSwatch.selected.blackText, .colorSwatch.blackText:hover { color: black; text-shadow: #fff 0px 0 calc(0.05 * var(--iconSize)); }
.colorSwatch.selected { box-shadow: 0 0 calc(0.025 * var(--iconSize)) calc(0.04 * var(--iconSize)) #33bbff; }