/* Global variables. */
:root html {
	--bg: #ffffff;
	--accent-bg: #fafafa;
	--text: #262626;
	--text-light: #8e8e8e;
	--border: #dbdbdb;
	--accent: #e4405f;
	--accent-hover: #d73652;
	--accent-text: #ffffff;
	--code: #c13584;
	--preformatted: #262626;
	--marked: #ffdc00;
	--disabled: #f5f5f5;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root html {
		color-scheme: dark;
		--bg: #000000;
		--accent-bg: #121212;
		--text: #ffffff;
		--text-light: #a8a8a8;
		--border: #262626;
		--accent: #e4405f;
		--accent-hover: #f56040;
		--accent-text: #ffffff;
		--code: #c13584;
		--preformatted: #ffffff;
		--disabled: #1a1a1a;
	}
}

/* stop scrolling the body */
body:has(dialog[open]) {
	overflow: hidden;
}

/* style indeterminates */
input[type="checkbox"]:indeterminate {
	background-color: var(--accent);
}
input[type="checkbox"]:indeterminate::after {
	content: " ";
	width: 0.34em;
	height: 0.1em;
	border-radius: 0;
	position: absolute;
	top: 0.2em;
	left: 0.09em;
	background-color: var(--bg);
	font-size: 1.8em;
	transform: none;
}

/* style ranges */
input[type="range"] {
	--size: 1.5rem;
	--radius: calc(var(--standard-border-radius) - 1px);
}
input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	height: var(--size);
	width: var(--size);
	background-color: var(--accent);
	border-radius: var(--radius);
}
input[type="range"]::-moz-range-thumb {
	appearance: none;
	height: var(--size);
	width: var(--size);
	background-color: var(--accent);
	border-radius: var(--radius);
	border: none;
}