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