$darkGray: rgb(34, 34, 34);
$lessDarkGray: rgb(44, 44, 44);
$hoverColor: rgba(113, 113, 113, 0.26);
$activeColor: $darkGray;

/* :export {
	darkGray: $darkGray;
	hoverColor: $hoverColor;
	activeColor: $activeColor;
} */

/* FIXME: Casemap control names */

body {
	/* FIXME: Think about whether this belongs in the theme, or whether it should be scoped to some sort of ApplicationFrame instead. */
	background-color: $darkGray;
}

.edgeRaise {
    box-shadow: inset -1px -1px rgba(30, 27, 27, 0.7),
	            inset  1px  1px rgba(135, 131, 131, 0.3);
}

.edgeLower {
    box-shadow: inset  1px  1px rgba(30, 27, 27, 0.7),
	            inset -1px -1px rgba(135, 131, 131, 0.3);
}

.uilibThemedElement {
	color: white;
}

/* Default to a black background for any newly-defined components that don't have their own styles yet, for minimum readability */
.uilibComponent {
	background-color: black;
}

/* ... but don't apply this to known container-type components which don't have their own styling */
.icon_icon, .grid_grid, .ribbonBox_box {
	background-color: transparent;
}

.bar {
	composes: edgeRaise;
	background-color: rgb(60, 62, 66);
}

.list_list {
	/* color: red; */
}

.list_item {
	&:nth-child(odd) {
		/* background-color: rgb(45, 45, 45); */
		/* background-color: rgb(51, 51, 51); */
		background-color: rgb(57, 57, 60);
	}

	&:nth-child(even) {
		background-color: rgb(27, 27, 27);
	}

	&.list_item_selected {
		/* FIXME: Find a better color for this. */
		/* background-color: rgb(38, 38, 42); */
		background-color: blue; /* FIXME: Remove testing color */
	}
}

.menu_menuBar, .ribbon_ribbon {
	composes: bar;
}

.menu_menuBar > .menu_item {
	&:hover {
		background-color: $hoverColor;
	}

	&.menu_item_selected, &menu_item_directPress {
		background-color: $activeColor;
	}
}

.menu_menu {
	background-color: $darkGray;
	box-shadow: 1px 1px 2px rgb(54, 54, 54);

	& > .menu_item:hover {
		background-color: $hoverColor;
	}

	hr {
		border-bottom: 1px solid rgb(78, 78, 78);
	}
}

.menu_divider {
	border-bottom: 1px solid rgb(78, 78, 78);
}

.button_button {
	background-color: #38383c;
	/* background-color: magenta; */
	border: none;
	
	&:hover {
		background-color: $hoverColor;
	}

	&:active {
		@include edge-lower;
		background-color: $activeColor;
	}

	&.button_selected {
		background-color: $darkGray;
	}
}

.ribbonBox_box {
	border-left: 1px solid rgba(30, 27, 27, 0.7);
	border-right: 1px solid rgba(135, 131, 131, 0.3);
}

.ribbonBox_label {
	background-color: #47464b;
	color: rgb(238, 238, 238);
}

.progressBar_bar {
	border: 1px solid rgb(32, 32, 32);
	/* background-color: rgb(64, 64, 70); */
	background-color: rgb(43, 43, 47);
}

.progressBar_fill {
	background-color: rgb(54, 135, 18);
}

.pane_handle {
	background-color: $darkGray;
	composes: edgeRaise;
}

.ribbon_ribbon {
	/* ... */
}