/*
 * Site-wide styling for the Dylan bar's light/dark toggle. Pairs with
 * view/global/theme.js, which owns the data-theme attribute this keys off.
 *
 * Like theme.js, this defines no page colors -- what dark mode looks like is
 * each service's own business (see the variables at the top of
 * view/pages/reminders/page.css). All that lives here is which of the
 * button's two icons is showing.
 *
 * The three blocks below are the standard shape for anything theme-aware on
 * this site, and the order matters:
 *   :root                                  the light defaults
 *   @media dark + :not([data-theme=light]) the OS setting, when no explicit choice
 *   :root[data-theme="dark"]               the explicit choice
 *
 * The :not([data-theme="light"]) guard is the load-bearing part. Without it
 * the media query keeps winning on an OS-dark device and "force light" does
 * nothing. data-theme="light" needs no block of its own: it excludes the
 * media query, so the :root defaults apply.
 */
:root {
    --dkf-moon-display: inline-block;
    --dkf-sun-display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --dkf-moon-display: none;
        --dkf-sun-display: inline-block;
    }
}

:root[data-theme="dark"] {
    --dkf-moon-display: none;
    --dkf-sun-display: inline-block;
}

/*
 * The button carries both icons and shows whichever mode it would switch
 * *to*. Both are in the server-rendered markup so Font Awesome converts them
 * to <svg> on load like every other icon in the bar -- an <i> injected by JS
 * would depend on FA's mutation observer catching it, and swapping the fa-*
 * class on an already-converted <svg> does nothing, since the glyph is baked
 * into its path by then. Choosing in CSS also means the icon tracks the OS
 * flipping (sunset, another window) with no listener anywhere.
 */
.dkf-theme-icon-moon {
    display: var(--dkf-moon-display);
}

.dkf-theme-icon-sun {
    display: var(--dkf-sun-display);
}

/* Sits among the Dylan bar's links, so it's styled as one of them rather
   than as a button: no chrome, inherit the bar's white text, same hover. */
.dkf-theme-btn {
    background: none;
    border: none;
    padding: 0;
    margin-left: 4px;
    color: #fff;
    cursor: pointer;
    line-height: inherit;
    vertical-align: baseline;
}

.dkf-theme-btn:hover,
.dkf-theme-btn:focus {
    color: rgba(255, 255, 255, .75);
}