/* CSS for Affected Selector Toggle Switch */
/*
    Use the following HTML structure to create an expandable/collapsible section:

        <label class="affected-selector-toggle" affected-selector=".controls" affected-attribute="render" affected-values="[visible,none]">
            <input type="checkbox" class="affected-selector-toggle-checkbox" onchange="toggleAffectedSelector(this)">
            <span class="toggle-marker" icon-unchecked="︿" icon-checked="﹀"></span>
        </label>
*/

/*
    The JavaScript function `toggleAffectedSelector` performs the following steps:
    1. Retrieves the necessary attributes from the parent <label> element of the checkbox.
    2. Determines the target element based on the 'affected-selector' attribute, either within a specific parent scope
       (specified by 'affected-parent-scope') or by traversing up to six levels in the DOM hierarchy.
    3. If 'affected-values' is not provided, the function adds or removes the attribute specified by 'affected-attribute'.
    4. If 'affected-values' is a single string, the function toggles this value in the attribute.
    5. If 'affected-values' is a two-element array, the function toggles between the two values in the attribute.
*/

label[affected-selector-toggle]  { display: inline; vertical-align: middle; }

label[affected-selector-toggle] .affected-selector-toggle-checkbox  { display: none; }

label[affected-selector-toggle] .toggle-marker                      { cursor: pointer; user-select: none; vertical-align: middle; }
label[affected-selector-toggle] .toggle-marker::before              { content: attr(icon-unchecked); display: inline-block; width: 1em; text-align: center; vertical-align: middle; transform: translateY(-6px); }


label[affected-selector-toggle] .affected-selector-toggle-checkbox:checked + .toggle-marker::before { content: attr(icon-checked); transform: translateY( 4px);  }