/* Theme switcher: header icon button + PopupMenu items.
   Menu container styling comes from the shared components/popup_menu/popupMenu.css. */

.theme-switcher-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: background 0.2s;
}

.theme-switcher-trigger:hover {
    background: var(--hover-color);
}

.theme-switcher-trigger svg {
    width: 1.4rem;
    height: 1.4rem;
}

.popup-menu li[data-action^="theme-"] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.popup-menu li[data-action^="theme-"] svg {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
}

.popup-menu li[data-action^="theme-"] .theme-menu-label {
    flex: 1;
}

/* display (not visibility) so the check cannot leak through the
   context menu's own visibility:hidden state */
.popup-menu li[data-action^="theme-"] .theme-menu-check {
    display: none;
    color: var(--brand-secondary);
}

.popup-menu li[data-action^="theme-"][aria-checked="true"] .theme-menu-check {
    display: block;
}