#dark_mode_toggle {
	background: rgba(204,204,204,0.5);
	border: 2px solid rgba(204,204,204,0.75);
	border-radius: 24px;
	color: #111111 !important;
	cursor: pointer;
	opacity: 0.8;
	overflow: hidden;
	/* @todo Make the positioning optional so the code below works! */
	position: fixed; bottom: 1rem; left: 1rem;
	z-index: 9;
}
body.dark_mode #dark_mode_toggle {
	background: rgba(102,102,102,0.5);
	border: 2px solid rgba(102,102,102,0.75);
	color: white !important;
}

body.dark_mode_toggle_fixed_top_left #dark_mode_toggle {
	position: fixed; top: 1rem; left: 1rem;
	z-index: 9;
}
body.dark_mode_toggle_fixed_top_right #dark_mode_toggle {
	position: fixed; top: 1rem; right: 1rem;
	z-index: 9;
}
body.admin-bar.dark_mode_toggle_fixed_top_left #dark_mode_toggle, body.admin-bar.dark_mode_toggle_fixed_top_right #dark_mode_toggle {
	top: calc(1rem + 32px);
}
body.dark_mode_toggle_fixed_bottom_left #dark_mode_toggle {
	position: fixed; bottom: 1rem; left: 1rem;
	z-index: 9;
}
body.dark_mode_toggle_fixed_bottom_center #dark_mode_toggle {
	position: fixed; left: 50%; bottom: 1rem;
	transform: translateX(-50%);
	z-index: 9;
}
body.dark_mode_toggle_fixed_bottom_right #dark_mode_toggle {
	position: fixed; right: 1rem; bottom: 1rem;
	z-index: 9;
}

body.page-template-empty-node #dark_mode_toggle, body.page-template-empty-node-modular #dark_mode_toggle {
	display: none !important;
}

	#dark_mode_toggle > * {
		display: inline-block;
		font-size: 9px;
		height: 40px;
		line-height: 40px;
		padding: 0 1rem;
		text-align: center;
		width: auto;
	}
	#dark_mode_toggle > *.current {
		border-radius: 20px;
		font-weight: bold;
	}

/**
 * Invert the background and foreground colors
 * Child themes will need to add more specifics
 */
body.dark_mode {
	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}