/* * Theme Toggle — header icon button + 3-option popover. * * Renders inline-flex so it sits next to the bell + user-menu * without extra wrapping. The popover positions absolutely * relative to .theme-toggle (the wrapping div). * * @since 1.22.860 */ .theme-toggle { position: relative; display: inline-flex; } /* ───── Trigger button ───── */ .theme-toggle__trigger { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md, 8px); color: var(--text-secondary); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .theme-toggle__trigger:hover { background: var(--surface-light-1); color: var(--text-primary); } .theme-toggle__trigger:focus-visible { outline: none; border-color: var(--border-focus, var(--accent-primary)); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(129, 140, 248, 0.30)); } .theme-toggle__trigger[aria-expanded="true"] { background: var(--surface-light-1); color: var(--text-primary); } /* Show sun in light, moon in dark. The icons stack and we reveal one based on the current effective theme on . */ .theme-toggle__icon { transition: opacity 0.15s ease; } .theme-toggle__icon--moon { display: none; } [data-theme="dark"] .theme-toggle__icon--sun { display: none; } [data-theme="dark"] .theme-toggle__icon--moon { display: inline-block; } /* ───── Popover panel ───── */ .theme-toggle__panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 999; min-width: 168px; padding: 6px; background: var(--surface-white, #ffffff); border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 2px; } .theme-toggle__panel[hidden] { display: none; } /* ───── Panel header with Beta tag ───── */ .theme-toggle__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border-default); } .theme-toggle__header-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .theme-toggle__beta-pill { display: inline-flex; align-items: center; padding: 1px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-primary, #4f46e5); background: var(--accent-primary-soft, rgba(79, 70, 229, 0.12)); border-radius: 999px; cursor: help; } /* ───── Option button ───── */ .theme-toggle__option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: transparent; border: 0; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--text-primary); text-align: left; cursor: pointer; transition: background-color 0.15s ease; } .theme-toggle__option:hover { background: var(--surface-light-1); } .theme-toggle__option:focus-visible { outline: none; background: var(--surface-light-1); box-shadow: inset 0 0 0 2px var(--border-focus, var(--accent-primary)); } .theme-toggle__option > span { flex: 1; } .theme-toggle__option > svg:first-child { flex-shrink: 0; color: var(--text-muted); } /* The checkmark only renders next to the active option. aria-checked="true" is the source of truth. */ .theme-toggle__check { opacity: 0; color: var(--brand-primary); flex-shrink: 0; transition: opacity 0.15s ease; } .theme-toggle__option[aria-checked="true"] .theme-toggle__check { opacity: 1; } .theme-toggle__option[aria-checked="true"] { color: var(--text-primary); } .theme-toggle__option[aria-checked="true"] > svg:first-child { color: var(--brand-primary); }