/* Befora Theme Toggle — scoped via data-component-id. */ [data-component-id="befora:theme-toggle"] { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid var(--bef-hairline-strong); border-radius: var(--r-pill); color: var(--bef-graphite); cursor: pointer; transition: background var(--dur-2) var(--ease-quiet), border-color var(--dur-2) var(--ease-quiet), color var(--dur-2) var(--ease-quiet); &:hover { background: var(--bef-canvas-raised); color: var(--bef-ink); border-color: var(--bef-control-border); } .befora-icon { width: 18px; height: 18px; display: none; } } /* The visible icon for cycle mode depends on the page-level [data-theme] attribute on , set by html.html.twig + js/theme-toggle.js. These rules live outside the component scope on purpose. */ :root:not([data-theme]) [data-component-id="befora:theme-toggle"] .befora-icon.befora-auto { display: block; } :root[data-theme="light"] [data-component-id="befora:theme-toggle"] .befora-icon.befora-light { display: block; } :root[data-theme="dark"] [data-component-id="befora:theme-toggle"] .befora-icon.befora-dark { display: block; } /* Flip mode icon visibility: show the TARGET theme icon. Moon = "click to go dark" (shown when current theme is light or system-light). Sun = "click to go light" (shown when current theme is dark). The media-query rule handles system-dark with no [data-theme] attribute. */ :root:not([data-theme]) [data-component-id="befora:theme-toggle"] .befora-icon.befora-flip-moon { display: block; } :root[data-theme="light"] [data-component-id="befora:theme-toggle"] .befora-icon.befora-flip-moon { display: block; } :root[data-theme="dark"] [data-component-id="befora:theme-toggle"] .befora-icon.befora-flip-sun { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) [data-component-id="befora:theme-toggle"] .befora-icon.befora-flip-moon { display: none; } :root:not([data-theme]) [data-component-id="befora:theme-toggle"] .befora-icon.befora-flip-sun { display: block; } } /* ── Touch target (#401, design #447) ────────────────────────────── Below 768px this needs a --touch-min hit area while the disc a visitor sees stays --touch-visual. Unlike the app-bar icon buttons this control draws a visible ring, so growing the button box would grow the ring too. The ring therefore moves to an ::after inset by --touch-inset: the border box grows to 44 for the tap target, the drawn disc stays 36, and the negative margin keeps the disc in the same optical position. See designs/components/mobile-kit.jsx#MobileIconBtn and the written standard in designs/components/form-elements.jsx §00. */ @media (width <= 768px) { [data-component-id="befora:theme-toggle"] { width: var(--touch-min); height: var(--touch-min); /* The header rows this sits in are flex; without this the 44px box is shrunk back under the minimum (measured 43.84px on /login). */ flex-shrink: 0; padding: var(--touch-inset); margin: calc(-1 * var(--touch-inset)); position: relative; background: transparent; /* border-WIDTH, not just the colour: a 1px border still occupies the box, and `inset` on the ::after below resolves against the PADDING box, so leaving it would draw the ring at 34px instead of --touch-visual. */ border: 0; } /* The base rule's :hover paints the button itself; at this width the disc is the ::after, so neutralise it and repaint below. */ [data-component-id="befora:theme-toggle"]:hover { background: transparent; border-color: transparent; } [data-component-id="befora:theme-toggle"]::after { content: ""; position: absolute; inset: calc((var(--touch-min) - var(--touch-visual)) / 2); border: 1px solid var(--bef-hairline-strong); border-radius: var(--r-pill); pointer-events: none; transition: background var(--dur-2) var(--ease-quiet), border-color var(--dur-2) var(--ease-quiet); } [data-component-id="befora:theme-toggle"]:hover::after { background: var(--bef-canvas-raised); border-color: var(--bef-control-border); } /* Keep the glyph above the ::after disc so the hover fill sits behind it. */ [data-component-id="befora:theme-toggle"] .befora-icon { position: relative; z-index: 1; } }