/*
 * The switch, and the fallback colours.
 *
 * Everything here is scoped to the plugin's own classes: a dark mode that
 * writes rules for a theme's elements is a dark mode that breaks the next
 * theme. The page's own colours are the engine's job — or, when the engine is
 * not used, the small block the server prints in the head.
 */

/* ------------------------------------------------------------- the switch */

.trdm-switch {
    --trdm-switch-size: 46px;
    --trdm-switch-offset: 22px;
    --trdm-switch-bg: #121114;
    --trdm-switch-fg: #ffffff;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-width: var(--trdm-switch-size);
    height: var(--trdm-switch-size);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    color: var(--trdm-switch-fg);
    background: var(--trdm-switch-bg);
    border: 0;
    cursor: pointer;
    /* Colour only. A button that grows or slides on hover is a button that
       moves under a finger on a touch screen. */
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.trdm-switch:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .22); }
.trdm-switch:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
/* Never the browser's blue ring on a mouse click: it sits there afterwards. */
.trdm-switch:focus:not(:focus-visible) { outline: none; }

.trdm-switch__mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
}

.trdm-switch__icon {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Crossfade rather than swap: the two marks are the same size and sit in
       the same place, so one dissolving into the other reads as a state
       changing rather than as a picture being replaced. */
    transition: opacity .18s ease, transform .25s ease;
}
.trdm-switch__icon--sun  { opacity: 0; transform: rotate(-45deg) scale(.7); }
.trdm-switch__icon--moon { opacity: 1; transform: none; }

.trdm-switch[aria-pressed="true"] .trdm-switch__icon--sun  { opacity: 1; transform: none; }
.trdm-switch[aria-pressed="true"] .trdm-switch__icon--moon { opacity: 0; transform: rotate(45deg) scale(.7); }

@media (prefers-reduced-motion: reduce) {
    .trdm-switch, .trdm-switch__icon { transition: none; }
    .trdm-switch__icon--sun, .trdm-switch__icon--moon { transform: none; }
}

.trdm-switch__text { white-space: nowrap; }

/* WordPress's own class, restated: a theme that does not define it would leave
   the label sitting next to the icon on every button that hides it. */
.trdm-switch .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* ---- the four shapes -------------------------------------------------- */

.trdm-switch--pill    { padding: 0 calc(var(--trdm-switch-size) / 3.2); border-radius: 999px; }
.trdm-switch--round   { border-radius: 50%; }
/* The same breathing room as the pill.
   With `padding: 0` from the base rule, a rounded square carrying a label put
   the mark against the left edge and the last letter against the right. Sized
   from the switch itself, so it holds at any size; a mark-only square is
   unchanged, because the padding and the icon add up to exactly min-width. */
.trdm-switch--square  { border-radius: 10px; padding: 0 calc(var(--trdm-switch-size) / 3.2); }
.trdm-switch--minimal {
    background: transparent;
    color: inherit;
    padding: 0 6px;
}
.trdm-switch--minimal:hover { box-shadow: none; opacity: .7; }

/* Round and minimal are square by construction, so a label inside them would
   stretch them out of shape. */
.trdm-switch--round .trdm-switch__text:not(.screen-reader-text),
.trdm-switch--minimal .trdm-switch__text:not(.screen-reader-text) {
    display: none;
}

/* ---- where it floats --------------------------------------------------- */

.trdm-switch--float {
    position: fixed;
    /* Above a theme's sticky header, below a cookie banner and a modal, which
       are the two things a visitor has to deal with first. */
    z-index: 9998;
}
.trdm-switch--bottom-right  { bottom: var(--trdm-switch-offset); right: var(--trdm-switch-offset); }
.trdm-switch--bottom-left   { bottom: var(--trdm-switch-offset); left: var(--trdm-switch-offset); }
.trdm-switch--top-right     { top: var(--trdm-switch-offset); right: var(--trdm-switch-offset); }
.trdm-switch--top-left      { top: var(--trdm-switch-offset); left: var(--trdm-switch-offset); }
.trdm-switch--bottom-centre { bottom: var(--trdm-switch-offset); left: 50%; transform: translateX(-50%); }

.trdm-switch--inline { vertical-align: middle; }

/* A phone screen is mostly thumb. The floating button moves in a little so it
   is not under the browser's own chrome, and never grows past a comfortable
   target. */
@media (max-width: 600px) {
    .trdm-switch--float { --trdm-switch-offset: 14px; }
}

/* ---- printing ---------------------------------------------------------- */

@media print {
    /* Nobody prints a dark page on purpose, and a printer will render it as a
       solid black rectangle. */
    .trdm-switch { display: none !important; }
    html.trdm-on, html.trdm-on body { background: #fff !important; color: #000 !important; }
}

/* ---- the engine did not arrive ----------------------------------------- */

/*
 * A plain dark page, from the colours the server already knew.
 *
 * This is what a reader gets if the engine fails to load — offline, blocked,
 * a bad connection. It is deliberately only the essentials: a background, a
 * text colour and links that can be seen. Trying to re-colour a whole theme
 * from a stylesheet is what makes dark modes look broken, and half a job here
 * is worse than the honest minimum.
 */
html.trdm-plain body,
html.trdm-plain .site,
html.trdm-plain .wp-site-blocks {
    background: inherit;
    color: inherit;
}
html.trdm-plain a { color: var(--trdm-link, #8AB4F8); }

/*
 * Fading between the two, when the setting asks for it.
 *
 * Only the properties that actually change colour, and only on elements that
 * carry one — a blanket `transition: all` on `*` is what makes a page feel
 * slow, because it also animates layout on every hover for the rest of the
 * visit.
 *
 * The media query is not a nicety. A reader who has asked their system for
 * reduced motion has usually done so because movement makes them ill, and a
 * whole page cross-fading is exactly the kind of movement they meant.
 */
html.trdm-fade,
html.trdm-fade body,
html.trdm-fade header,
html.trdm-fade footer,
html.trdm-fade main,
html.trdm-fade article,
html.trdm-fade aside,
html.trdm-fade nav,
html.trdm-fade section {
	transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	html.trdm-fade,
	html.trdm-fade * {
		transition: none !important;
	}
}