div.options-group {
	display: grid;
	grid-template-columns: max-content auto;
	align-items: center;
}

@media only screen and (min-width: 1600px) {
	div.options-group.double {
		grid-template-columns: max-content auto max-content auto;
    }
}

/* left side */
div.options-group div.description {
	margin-right: 10px;
}

/* right side */
div.options-group div.button-group {
	margin: 6px 0;
}

div.options-group span.comment {
	color: gray;
	font-style: italic;
	margin-left: 10px;
}

div.options-group button {
	color: var(--link-color);
	background-color: var(--button-color);
	border: none; /* outline instead of border */
	/* left & right outline overlap each other so we don't have a double border */
	outline: solid 2px var(--button-border-color);
	margin-left: 2px;
}

div.options-group button:hover {
	background-color: var(--button-hover-color);
}

div.options-group button.selected {
	background-color: var(--button-selected-color);
}

div.options-group button.disabled {
	color: white;
	pointer-events: none;
	cursor: default;
}

div.options-group button.selected.on {
	background-color: #103d10;
}

div.options-group button.on:hover {
	background-color: #1b651b;
}

div.options-group button.selected.off {
	background-color: #40100d;
}

div.options-group button.off:hover {
	background-color: #6a1b16;
}

div.options-group button.selected.neutral {
	background-color: #4d4d00;
}

div.options-group button.neutral:hover {
	background-color: #666600;
}

/* input box */
div.options-group input {
	border: 2px solid var(--button-border-color);
	min-width: unset; /* remove SC styling */
	width: 140px;
}

div.options-group input.number {
	width: 50px;
}

src/gui/css/options.css