/* Dark theme styling */
@media (prefers-color-scheme: dark) {
	html {
		--blockBg: hsl(var(--hue), 25%, 10%);
		--blockBgAlt: hsl(var(--hue), 35%, 15%);
		--blockBgDark: hsla(0, 0%, 0%, 25%);

		--borderRadius: 4px;

		--textColor: hsl(var(--hue), 35%, 90%);
		--textColorHighlight: hsl(var(--hue), 80%, 55%);
		--textColorDim: hsl(var(--hue), 15%, 60%);

		--inputBg: hsl(var(--hue), 40%, 10%);
		--inputHoverBg: hsl(var(--hue), 40%, 15%);
		--inputBorder: hsl(var(--hue), 15%, 25%);
		--inputShadow: hsl(var(--hue), 25%, 25%);
	}

	.block-footer {
		border-color: hsl(var(--hue), 25%, 20%);
	}

	.block-message {
		background: hsl(var(--hue), 25%, 15%);
		border: 1px solid hsl(var(--hue), 65%, 20%);
		color: hsl(var(--hue), 25%, 80%);
		box-shadow: 0 0 3px hsl(var(--hue), 85%, 25%);
	}

	.user {
		box-shadow: inset 0 0 3px hsl(var(--hue), 25%, 25%);
		background: hsl(var(--hue), 25%, 15%);
	}
}

/* Unfortunately have to dup */
html.theme--dark {
	--blockBg: hsl(var(--hue), 25%, 10%);
	--blockBgAlt: hsl(var(--hue), 35%, 15%);
	--blockBgDark: hsla(0, 0%, 0%, 25%);

	--borderRadius: 4px;

	--textColor: hsl(var(--hue), 35%, 90%);
	--textColorHighlight: hsl(var(--hue), 80%, 55%);
	--textColorDim: hsl(var(--hue), 15%, 60%);

	--inputBg: hsl(var(--hue), 40%, 10%);
	--inputHoverBg: hsl(var(--hue), 40%, 15%);
	--inputBorder: hsl(var(--hue), 15%, 25%);
	--inputShadow: hsl(var(--hue), 25%, 25%);
}

html.theme--dark .block-footer {
	border-color: hsl(var(--hue), 25%, 20%);
}

html.theme--dark .block-message {
	background: hsl(var(--hue), 25%, 15%);
	border: 1px solid hsl(var(--hue), 65%, 20%);
	color: hsl(var(--hue), 25%, 80%);
	box-shadow: 0 0 3px hsl(var(--hue), 85%, 25%);
}

html.theme--dark .user {
	box-shadow: inset 0 0 3px hsl(var(--hue), 25%, 25%);
	background: hsl(var(--hue), 25%, 15%);
}