/*
 * 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 */

/*
 * Nothing to press until there is something to press it with.
 *
 * The button is printed by PHP so it is in the document for a screen reader,
 * and the class that reveals it is added by the script in the head — before
 * the first paint, so nobody sees it appear. The code has said for a long time
 * that the switch is "hidden rather than broken" with scripting off; this is
 * the line that makes that true.
 */
.trdm-switch { display: none; }
/* The settings screen draws the same button to show what it will look like.
   That one is a picture of a button, not a button — it is not waiting on the
   front-end script and must always be visible, or the merchant is choosing a
   size and a colour for something they cannot see. */
html.trdm-js .trdm-switch,
.trdm-switchpreview .trdm-switch {
    --trdm-switch-size: 46px;
    --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-color: 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); }
/* Two rings, and they are opposites, so one of them always shows.
   There was one, in currentColor — the button's own text colour, which is
   white — and outline-offset draws it OUTSIDE the pill, on the page. On a
   light page that is a white ring on white: somebody tabbing through the site
   had no way to tell they had arrived. The inner ring reads against a dark
   page, the outer one against a light page, and the two colours are already
   chosen to contrast with each other because the mark has to read on the
   pill. */
.trdm-switch:focus-visible {
    outline: 2px solid var(--trdm-switch-bg, #121114);
    outline-offset: 2px;
    box-shadow:
        0 0 0 2px var(--trdm-switch-fg, #ffffff),
        0 6px 20px rgba(0, 0, 0, .22);
}
/* Never the browser's blue ring on a mouse click: it sits there afterwards. */
.trdm-switch:focus:not(:focus-visible) { outline: none; }

/*
 * On a dark page, the lighter of the two colours outside.
 *
 * A merchant chooses the pair for their light site, which nearly always means
 * a dark pill: on a dark page that measured 1.2:1, and a visitor who had just
 * pressed it could barely find it again. The two colours swap roles here when
 * that is what it takes (TRDM_Frontend::dark_pair() works out which is which),
 * so the contrast between mark and pill is still the merchant's own and the
 * shape shows on the page. The two rings follow, for the same reason they are
 * two. The Automatic engine re-colours stylesheets, this one included, so
 * night.js hands it the same two colours as a fix it leaves alone.
 *
 * The settings screen's preview shows the dark state with aria-pressed.
 */
html.trdm-on .trdm-switch:not(.trdm-switch--minimal),
.trdm-switchpreview .trdm-switch[aria-pressed="true"]:not(.trdm-switch--minimal) {
    background-color: var(--trdm-switch-bg-dark, var(--trdm-switch-bg));
    color: var(--trdm-switch-fg-dark, var(--trdm-switch-fg));
}
html.trdm-on .trdm-switch:not(.trdm-switch--minimal):focus-visible,
.trdm-switchpreview .trdm-switch[aria-pressed="true"]:not(.trdm-switch--minimal):focus-visible {
    outline-color: var(--trdm-switch-bg-dark, var(--trdm-switch-bg));
    box-shadow:
        0 0 0 2px var(--trdm-switch-fg-dark, var(--trdm-switch-fg)),
        0 6px 20px rgba(0, 0, 0, .22);
}

.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; }

/*
 * Which mark shows follows the page, not the button.
 *
 * These were keyed on aria-pressed alone, and since 1.2.4 the drawn button
 * carries no aria-pressed on the site — its wording already says the state.
 * So the sun never came out: an icon-only button showed the moon on a light
 * page and the moon on a dark one, and looked exactly the same before and
 * after it was pressed. The class the head script puts on <html> is set
 * before the first paint and can be read by every copy of the mark at once:
 * the floating button, the block, the shortcode and the toolbar switch.
 *
 * The settings screen's preview has no page to be dark, so it still presses
 * aria-pressed to show the other state.
 */
html.trdm-on .trdm-switch__icon--sun,
.trdm-switch[aria-pressed="true"] .trdm-switch__icon--sun  { opacity: 1; transform: none; }
html.trdm-on .trdm-switch__icon--moon,
.trdm-switch[aria-pressed="true"] .trdm-switch__icon--moon { opacity: 0; transform: rotate(45deg) scale(.7); }

@media (prefers-reduced-motion: reduce) {
    html.trdm-js .trdm-switch, .trdm-switchpreview .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 -------------------------------------------------- */

/*
 * Written with the same two prefixes as the base rule above, and after it.
 *
 * The base rule became `html.trdm-js .trdm-switch` when the switch started
 * waiting for the head script, which made it outrank a bare
 * `.trdm-switch--pill`: its `padding: 0` and its pill colours won, so a pill
 * or square with a label had its words against both edges, and Minimal, "Icon
 * with no background", was drawn as a dark square. Equal weight, later in the
 * file, and the shape wins again.
 */
html.trdm-js .trdm-switch--pill,
.trdm-switchpreview .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. */
html.trdm-js .trdm-switch--square,
.trdm-switchpreview .trdm-switch--square  { border-radius: 10px; padding: 0 calc(var(--trdm-switch-size) / 3.2); }
html.trdm-js .trdm-switch--minimal,
.trdm-switchpreview .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 --------------------------------------------------- */

/*
 * The distance from the corner.
 *
 * --trdm-switch-edge is only written onto the button when the merchant has
 * changed it; otherwise it is 22px, and 14px on a phone, where a screen is
 * mostly thumb. It used to be written every time, as --trdm-switch-offset in
 * the style attribute, which beat the phone rule below so that it never
 * applied to anybody.
 *
 * The bottom corners also clear anything a Traslatability plugin pins to the
 * bottom of the screen, a shipping bar or a share bar, which publishes its
 * height as --trasl-bottom-inset while it is showing. Moving up is how two of
 * them stop overlapping; a higher z-index would only decide which one hides.
 *
 * Logical sides, so a right-to-left site gets the mirror image.
 */
.trdm-switch--float {
    --trdm-switch-offset: var(--trdm-switch-edge, 22px);
    --trdm-switch-lift: calc(var(--trdm-switch-offset) + var(--trasl-bottom-inset, 0px));
    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;
}
/* Top of the stack in a shared bottom corner: above a prize-wheel launcher
   and a contents button, each of which says how much of the corner it takes. */
.trdm-switch--bottom-right  { inset-block-end: calc(var(--trdm-switch-lift) + var(--trasl-stack-be-trlw, 0px) + var(--trasl-stack-be-trtc, 0px)); inset-inline-end: var(--trdm-switch-offset); }
.trdm-switch--bottom-left   { inset-block-end: calc(var(--trdm-switch-lift) + var(--trasl-stack-bs-trlw, 0px) + var(--trasl-stack-bs-trtc, 0px)); inset-inline-start: var(--trdm-switch-offset); }
/* Top corners: under the admin bar, a top shipping bar and a top cookie
   banner, each of which says how much of the top it takes — and below a
   prize-wheel launcher in the same corner, as at the bottom. */
.trdm-switch--top-right     { inset-block-start: calc(var(--trdm-switch-offset) + var(--trasl-top-inset, 0px) + var(--trasl-stack-te-trlw, 0px)); inset-inline-end: var(--trdm-switch-offset); }
.trdm-switch--top-left      { inset-block-start: calc(var(--trdm-switch-offset) + var(--trasl-top-inset, 0px) + var(--trasl-stack-ts-trlw, 0px)); inset-inline-start: var(--trdm-switch-offset); }
/* Centred is the same in either direction, so it stays physical. */
.trdm-switch--bottom-centre { inset-block-end: var(--trdm-switch-lift); left: 50%; transform: translateX(-50%); }

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

/*
 * A phone.
 *
 * The same width the device rule calls a phone. The merchant can send the
 * button to a top corner here, or leave it out, without moving it anywhere
 * else: on a phone the bottom corner is where a page keeps its own buttons,
 * "Proceed to Checkout" among them.
 */
@media (max-width: 599px) {
    .trdm-switch--float { --trdm-switch-offset: var(--trdm-switch-edge, 14px); }

    .trdm-switch--phone-hide { display: none !important; }
    .trdm-switch--phone-top-right,
    .trdm-switch--phone-top-left {
        inset: auto;
        inset-block-start: var(--trdm-switch-offset);
        transform: none;
    }
    .trdm-switch--phone-top-right { inset-inline-end: var(--trdm-switch-offset); }
    .trdm-switch--phone-top-left  { inset-inline-start: var(--trdm-switch-offset); }
}

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

/*
 * The same two marks, in WordPress's toolbar.
 *
 * The item used to carry an empty .ab-icon — a gap where a glyph should be,
 * because nothing gave it one — and WordPress hides every top-level toolbar
 * item on a phone unless it is on core's own list. So an editor checking a
 * page on their phone found no switch at all.
 *
 * Every rule goes through three ids because core's own rules do: its reset,
 * `#wpadminbar *`, sets position, size and margin on everything in the bar,
 * and `#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon` gives
 * every top-level icon its padding. A rule weaker than those loses to them.
 * The name stays "Dark Mode" and aria-pressed carries the state for a screen
 * reader; the mark shows it to the eye.
 */
#wpadminbar #wp-toolbar li#wp-admin-bar-trdm-toggle .trdm-bar-icon {
    position: relative;
    width: 20px;
    height: 20px;
    margin: 6px 6px 0 0;
    padding: 0;
    color: rgba(240, 246, 252, .6);
}
#wpadminbar #wp-toolbar li#wp-admin-bar-trdm-toggle .trdm-switch__icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
}
#wpadminbar #wp-toolbar li#wp-admin-bar-trdm-toggle:hover .trdm-bar-icon,
#wpadminbar #wp-toolbar li#wp-admin-bar-trdm-toggle .ab-item:focus .trdm-bar-icon { color: #72aee6; }

/* Core's phone toolbar: icon-only items 52px wide and 46px tall, label kept
   for screen readers only. This one joins them rather than disappearing. */
@media screen and (max-width: 782px) {
    #wpadminbar li#wp-admin-bar-trdm-toggle { display: block; }
    #wpadminbar #wp-toolbar li#wp-admin-bar-trdm-toggle .trdm-bar-icon {
        width: 52px;
        height: 46px;
        margin: 0;
    }
    #wpadminbar #wp-toolbar li#wp-admin-bar-trdm-toggle .trdm-switch__icon {
        top: 10px;
        left: 13px;
        width: 26px;
        height: 26px;
    }
}

/* ---- 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;
	}
}

/* ============================================ which screen sizes see it */
/* Decided by the width of the window, not by guessing from the browser: a
   narrow desktop window is a narrow window, and a page cache has one copy to
   serve everybody. A switch with none of these classes is shown at every size;
   one that carries some is hidden outside them. The script stands down on the
   same widths, so the button and the mode always agree. */
@media (max-width: 599px) {
    .trdm-switch[class*="trasl-on-"]:not(.trasl-on-mobile) { display: none !important; }
}
@media (min-width: 600px) and (max-width: 1024px) {
    .trdm-switch[class*="trasl-on-"]:not(.trasl-on-tablet) { display: none !important; }
}
@media (min-width: 1025px) {
    .trdm-switch[class*="trasl-on-"]:not(.trasl-on-desktop) { display: none !important; }
}