/**
 * Dark mode images (inc/dark-images.php) — of an image's two versions,
 * show the one for the mode on screen. The selectors mirror the dark mode
 * switch in color-mode.css (--st-invert) exactly.
 */

.st-dark-image {
	display: none;
}

body.st-color-mode-dark .st-light-image,
:root:not([data-theme]) body.st-color-mode-default-dark .st-light-image,
:root[data-theme="dark"] body .st-light-image {
	display: none;
}

body.st-color-mode-dark .st-dark-image,
:root:not([data-theme]) body.st-color-mode-default-dark .st-dark-image,
:root[data-theme="dark"] body .st-dark-image {
	display: revert;
}

@media (prefers-color-scheme: dark) {

	:root:not([data-theme]) body.st-color-mode-default-system .st-light-image {
		display: none;
	}

	:root:not([data-theme]) body.st-color-mode-default-system .st-dark-image {
		display: revert;
	}
}

/* Inside a section whose background is the same in both modes, the
   version for that background, whatever the mode: Inverse is always
   dark (the dark-mode image), Brand always the brand colour, with dark
   text on it in both modes (the light-mode image). A header or footer
   with one of these section styles shows the right logo. Two classes
   per image to outrank the mode switch above. */
:root:root body .is-style-section-inverse .st-light-image.st-light-image,
:root:root body .is-style-section-brand .st-dark-image.st-dark-image {
	display: none;
}

:root:root body .is-style-section-inverse .st-dark-image.st-dark-image,
:root:root body .is-style-section-brand .st-light-image.st-light-image {
	display: revert;
}