/*--------------------------------------------------------------
>>> STYLES
----------------------------------------------------------------
# Filters
    # Invert colors
    # Bluelight
    # Dynamic theme
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# FILTERS
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# INVERT COLORS
--------------------------------------------------------------*/

html[dm-invert-colors]:not([dm-default-theme='dark']) canvas,
html[dm-invert-colors]:not([dm-default-theme='dark']) img,
html[dm-invert-colors]:not([dm-default-theme='dark']) video,
html[dm-invert-colors]:not([dm-default-theme='dark']) iframe,
html[dm-invert-colors]:not([dm-default-theme='dark']) [style*=background-image] {
	filter: invert(1) !important;
}

html[dm-invert-colors]:not([dm-default-theme='dark']) {
	background-color: #fff !important;
}


/*--------------------------------------------------------------
# BLUELIGHT
--------------------------------------------------------------*/

#dark-mode__bluelight {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;

	visibility: hidden !important;

	width: 100% !important;
	height: 100vh !important;

	pointer-events: none !important;
}


/*--------------------------------------------------------------
# DYNAMIC THEME
--------------------------------------------------------------*/

html:not([dm-allow-colors]),
html:not([dm-allow-colors]) body,
html:not([dm-allow-colors]) body :not(iframe),
html:not([dm-allow-colors]) body :not(iframe)::before,
html:not([dm-allow-colors]) body :not(iframe)::after {
	color: rgb(82, 82, 82) !important;
	border-color: rgb(41, 41, 41) !important;
	background-color: rgb(20, 20, 20) !important;

	fill: rgb(82, 82, 82) !important;
	stroke: rgb(82, 82, 82) !important;
}

html:not([dm-allow-transitions]) * {
	transition: none !important;
}