Boolean State Indicator

toggle-container.css

/* Declare default state and action indicators for '.toggle-container' scope. */
    
    .toggle-container {
        --current-mode: "interactive/";
        --current-state: "collapsible";
        --current-action: "expand";
        --current-scope: "all";
    }
    
    /* Select '.toggle-container' via ':checked' to set values in toggled state. */
    
    #toggle-all:checked + label .toggle-container {
        --current-mode: "static/";
        --current-state: "expanded";
        --current-action: "collapse";
        --current-scope: "back";
    }
    
    /* Select '.toggle-container' directly and via ':checked' to set values 
     * for landscape mode. The query is itself the boolean selector that 
     * overrides previous states.
     */
    
    @media (max-width: 991.98px) and (orientation: landscape) {
        .toggle-container,
        #toggle-all:checked + label .toggle-container {
            --current-mode: "dashboard/";
            --current-state: "expanded";
            --current-action: "landscape";
            --current-scope: "auto";
        }
    }
    
    /* The state indicator ruleset (snippet) */
    
    #toggle-all + label .toggle-container:after {
        content: var(--current-mode) "\a" var(--current-state);
    }    
    
    /* The action indicator ruleset (snippet) */
    
    #toggle-all + label .toggle-container:before {
        content: var(--current-action) "\a" var(--current-scope);
    }