/*
* Theme toggle button
* -------------------
* Audit Step 8 — see docs/STOREFRONT-DESIGN-AUDIT.md.
*
* Renders a sun (light → dark target) or moon (dark → light target) based on
* the current theme. The icon swap is driven by [data-current-theme] which
* dark-mode.js keeps in sync with .
*
* Markup contract:
*
* Tema escuro
* Tema claro
*
*
* Default state (no JS yet) shows the moon — clicking enters dark mode.
*/
.lb-theme-toggle {
background: transparent;
border: 0;
padding: 0;
color: inherit;
font-size: inherit;
line-height: inherit;
cursor: pointer;
}
/* Note: :focus-visible ring is handled globally in tokens.css for
* (matches our brand-aware currentColor approach). The .panelLinks override
* below is kept because the toggle button colour-swaps on hover/focus. */
/* Icon and label visibility — driven by (NOT by
* data-current-theme on the button itself). The anti-flash inline script in
* each sets BEFORE first paint, so the correct icon
* is on-screen from the first frame — no flash on page load.
*
* dark-mode.js still maintains data-current-theme on the button for ARIA
* (aria-pressed / aria-label semantics), but visual swap is html-driven.
*
* !important needed because FontAwesome's `.fa` declares display: inline-block
* at higher load-priority (font-awesome/6 all.min.css loads after this file
* via the onload="this.rel='stylesheet'" promotion). Without !important the
* .fa rule wins and both icons render stacked. */
html[data-theme="light"] .lb-theme-icon-light,
html[data-theme="light"] .lb-theme-label-light,
html[data-theme="dark"] .lb-theme-icon-dark,
html[data-theme="dark"] .lb-theme-label-dark {
display: none !important;
}
/* Default state — no explicit choice (no data-theme attribute on ):
* show the moon (offer to switch to dark). prefers-color-scheme: dark may
* still paint a dark page; this is a known minor cosmetic miss until the
* user clicks once. */
html:not([data-theme]) .lb-theme-icon-light,
html:not([data-theme]) .lb-theme-label-light {
display: none !important;
}
/* Desktop header context — the toggle lives in .panelLinks (header.phtml).
* The siblings (cart link, account link) are elements that pick up
* `color: var(--lb-toggle-icon)` from .panelLinks a in computer/layout/
* header.css. Our doesn't match that selector, so we mirror the
* colour rules here. */
.panelLinks .lb-theme-toggle {
color: var(--lb-toggle-icon);
}
.panelLinks .lb-theme-toggle:hover,
.panelLinks .lb-theme-toggle:focus-visible {
color: var(--lb-toggle-icon-hover);
}
/*
* Match the sibling .panelLinks .fa size (cart, account icons).
* Production: 3rem → 30px under BS3's html=10px rule.
*/
.panelLinks .lb-theme-toggle .fa {
font-size: 30px;
}
/* Mobile sidenav context — the toggle lives in #headerSidenavInfo with
* lighter text on a dark grey background. Pick up the sidenav link colour. */
#headerSidenavInfo .lb-theme-toggle {
color: inherit;
font-size: inherit;
}
/* Optional gentle transition on the body chrome when the user flips the
* toggle. Limit to colour/background-color so layout-affecting properties
* are unaffected (no jank). */
body,
.lb-bg-fff,
.lb-bg-f5,
.lb-bg-f6,
.lb-bg-fa {
transition: background-color .18s ease, color .18s ease;
}