/*
===================
Dark Mode Toggle CSS
===================
Styles the toggle button used by the Dark Mode Toggle widget.
*/

#widget-darkthemetoggle ul,
#widget-darkthemetoggle li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#widget-darkthemetoggle li {
	text-align: center;
}

.fp-theme-toggle {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: .45em .6em;
	font: inherit;
	text-align: center;
	cursor: pointer;
	color: #333333;
	border: 1px solid #999977;
	background-color: #EEEEDD;
}

.fp-theme-toggle:hover {
	color: #AA1111;
	border-color: #AA1111;
	background-color: #f9f9f9;
}

.fp-theme-toggle:focus-visible {
	outline: 2px solid #AA1111;
	outline-offset: 1px;
}

/* the button's dark look follows the site's dark appearance */
html[data-fp-theme="dark"] .fp-theme-toggle {
	color: #d9d5c9;
	border-color: #6b6b52;
	background-color: #1c1c18;
}

html[data-fp-theme="dark"] .fp-theme-toggle:hover {
	color: #d46a5a;
	border-color: #d46a5a;
	background-color: #23231d;
}

html[data-fp-theme="dark"] .fp-theme-toggle:focus-visible {
	outline-color: #d46a5a;
}