/*
 * Day / night theme.
 *
 * Night mode inverts the outermost page once (every tab and popup iframe is
 * rendered inside it, so it is darkened too) and flips photos, videos and
 * charts back so product images keep their real colours. Each document marks
 * whether it is the outermost one; see theme.js.
 */
html[data-theme="dark"][data-theme-root="1"] {
    filter: invert(0.88) hue-rotate(180deg);
    background: #fff;
}

html[data-theme="dark"] img,
html[data-theme="dark"] video,
html[data-theme="dark"] canvas,
html[data-theme="dark"] picture,
html[data-theme="dark"] .theme-keep-colors {
    filter: invert(1) hue-rotate(180deg);
}

/* Nested inside an element that already flipped back: do not flip twice. */
html[data-theme="dark"] .theme-keep-colors img,
html[data-theme="dark"] .theme-keep-colors video,
html[data-theme="dark"] .theme-keep-colors canvas,
html[data-theme="dark"] picture img {
    filter: none;
}

html {
    transition: filter .2s ease;
}