/*
This stylesheet defines styles for color-related elements,
	such as the color-selection buttons and flex box.
*/

div.color-flex {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;

	border: 2pt solid black;
}

button.color-selector {
	aspect-ratio: 1/1;
	border: none;
	width: 33%;
}

/* TODO: Make this use CSS variables. */
#neutral.dark {
	background-color: #000;
}

#neutral {
	background-color: #555;
}

#neutral.light {
	background-color: #aaa;
}

#red.dark {
	background-color: #570000;
}

#red {
	background-color: #f00;
}

#red.light {
	background-color: #ff5454;
}

#orange.dark {
	background-color: #572b00;
}

#orange {
	background-color: #f70;
}

#orange.light {
	background-color: #ffa954;
}

#yellow.dark {
	background-color: #575700;
}

#yellow {
	background-color: #ff0;
}

#yellow.light {
	background-color: #ffff54;
}

#lime.dark {
	background-color: #2b5700;
}

#lime {
	background-color: #7f0;
}

#lime.light {
	background-color: #a9ff54;
}

#green.dark {
	background-color: #005700;
}

#green {
	background-color: #0f0;
}

#green.light {
	background-color: #54ff54;
}

#aqua.dark {
	background-color: #005757;
}

#aqua {
	background-color: #0ff;
}

#aqua.light {
	background-color: #54ffff;
}

#azure.dark {
	background-color: #002b57;
}

#azure {
	background-color: #07f;
}

#azure.light {
	background-color: #54a9ff;
}

#blue.dark {
	background-color: #000057;
}

#blue {
	background-color: #00f;
}

#blue.light {
	background-color: #5454ff;
}

#purple.dark {
	background-color: #2b0057;
}

#purple {
	background-color: #70f;
}

#purple.light {
	background-color: #a954ff;
}

#magenta.dark {
	background-color: #570057;
}

#magenta {
	background-color: #f0f;
}

#magenta.light {
	background-color: #ff54ff;
}

#rose.dark {
	background-color: #57002b;
}

#rose {
	background-color: #f07;
}

#rose.light {
	background-color: #ff54a9;
}