:root {
	--red: #fa7373;
	--blue: rgb(40, 226, 217);
	--green: rgb(70, 230, 78);
	--marine: rgb(121, 106, 255);
	--purple: rgb(245, 83, 191);
	--orange: rgb(255, 179, 39);

	--light-red: #ffbebe;
	--light-blue: rgb(180, 255, 251);
	--light-green: rgb(190, 255, 193);
	--light-marine: rgb(196, 191, 253);
	--light-purple: rgb(255, 191, 234);
	--light-orange: rgb(255, 231, 187);
}

#editor > [stack] {
	padding: 1px 3px;
	border: 1px solid;
	border-radius: 6px;
}

#editor[highlight=rainbow] > [color=red] {
	border-color: var(--red);
	box-shadow: 0 0 2px 0 var(--red);
}
#editor[highlight=rainbow] > [color=blue] {
	border-color: var(--blue);
	box-shadow: 0 0 2px 0 var(--blue);
}
#editor[highlight=rainbow] > [color=marine] {
	border-color: var(--marine);
	box-shadow: 0 0 2px 0 var(--marine);
}
#editor[highlight=rainbow] > [color=green] {
	border-color: var(--green);
	box-shadow: 0 0 2px 0 var(--green);
}
#editor[highlight=rainbow] > [color=purple] {
	border-color: var(--purple);
	box-shadow: 0 0 2px 0 var(--purple);
}
#editor[highlight=rainbow] > [color=orange] {
	border-color: var(--orange);
	box-shadow: 0 0 2px 0 var(--orange);
}

#editor[highlight=byDensity] > [density=high] {
	border-color: var(--red);
	box-shadow: 0 0 2px 0 var(--red);
}
#editor[highlight=byDensity] > [density=medium] {
	border-color: var(--orange);
	box-shadow: 0 0 2px 0 var(--orange);
}
#editor[highlight=byDensity] > [density=low] {
	border-color: var(--green);
	box-shadow: 0 0 2px 0 var(--green);
}


#editor[highlight=rainbow] > [color=red].hover {
	background-color: var(--light-red);
}
#editor[highlight=rainbow] > [color=blue].hover {
	background-color: var(--light-blue);
}
#editor[highlight=rainbow] > [color=marine].hover {
	background-color: var(--light-marine);
}
#editor[highlight=rainbow] > [color=green].hover {
	background-color: var(--light-green);
}
#editor[highlight=rainbow] > [color=purple].hover {
	background-color: var(--light-purple);
}
#editor[highlight=rainbow] > [color=orange].hover {
	background-color: var(--light-orange);
}

#editor[highlight=byDensity] > [density=high].hover {
	background-color: var(--light-red);
}
#editor[highlight=byDensity] > [density=medium].hover {
	background-color: var(--light-orange);
}
#editor[highlight=byDensity] > [density=low].hover {
	background-color: var(--light-green);
}

#stacks tr:not(:first-child) {
	border-radius: 6px;
	cursor: pointer;
}
#stacks .label {
	width: 30px;
	height: 100%;
}
#stacks .label > div {
	border: 2px solid black;
	border-radius: 100%;
	width: 16px;
	height: 16px;
	margin: 5px;
}
#stacks[highlight=rainbow] [color=red] .label > div {
	border-color: var(--red);
}
#stacks[highlight=rainbow] [color=blue] .label > div {
	border-color: var(--blue);
}
#stacks[highlight=rainbow] [color=marine] .label > div {
	border-color: var(--marine);
}
#stacks[highlight=rainbow] [color=green] .label > div {
	border-color: var(--green);
}
#stacks[highlight=rainbow] [color=purple] .label > div {
	border-color: var(--purple);
}
#stacks[highlight=rainbow] [color=orange] .label > div {
	border-color: var(--orange);
}

#stacks[highlight=byDensity] [density=high] .label > div {
	border-color: var(--red);
}
#stacks[highlight=byDensity] [density=medium] .label > div {
	border-color: var(--orange);
}
#stacks[highlight=byDensity] [density=low] .label > div {
	border-color: var(--green);
}


#stacks[highlight=rainbow] [color=red].hover {
	background-color: var(--light-red);
}
#stacks[highlight=rainbow] [color=blue].hover {
	background-color: var(--light-blue);
}
#stacks[highlight=rainbow] [color=marine].hover {
	background-color: var(--light-marine);
}
#stacks[highlight=rainbow] [color=green].hover {
	background-color: var(--light-green);
}
#stacks[highlight=rainbow] [color=purple].hover {
	background-color: var(--light-purple);
}
#stacks[highlight=rainbow] [color=orange].hover {
	background-color: var(--light-orange);
}

#stacks[highlight=byDensity] [density=high].hover {
	background-color: var(--light-red);
}
#stacks[highlight=byDensity] [density=medium].hover {
	background-color: var(--light-orange);
}
#stacks[highlight=byDensity] [density=low].hover {
	background-color: var(--light-green);
}