<!-- :indeterminate -->
<section class="example-cntr indeterminate">
    <h1>CSS <code>:indeterminate</code> pseudo-class</h1>    
    <p>Targets input elements like radio buttons and checkboxes that are not selected or unselected. When the input element is active, the indeterminate state is gone, thus, the styling changes.</p>
    <h3>Checkbox: <span>This checkbox has been given the <code>indeterminate</code> state via JavaScript.</span></h3>
    <input type="checkbox" id="indeterminate-choice" class="indeterminate-choice">
    <label for="indeterminate-choice">I agree with the Terms &amp; Conditions</label>
    <h3>Radio buttons: <span>A group of radio buttons without a default/pre-selected radio button set.</span></h3>
    <ul>
        <li>
            <input type="radio" name="list" id="option1">
            <label for="option1">Option 1</label>
        </li>
        <li>
            <input type="radio" name="list" id="option2">
            <label for="option2">Option 2</label>
        </li>
        <li>
            <input type="radio" name="list" id="option3">
            <label for="option3">Option 3</label>
        </li>
    </ul>
    <small>Note: If you’re seeing this Pen in Editor Mode, press the “Run” button on top to reset the inputs. Otherwise, refresh the page.</small>
</section>

//:indeterminate
.indeterminate {
    label { background: $g; }
    :indeterminate + label {
        background: $r;
    }
}


//Styling stuff not needed for demo
body { text-align: left; }
h1 {
    text-transform: none;
    border-bottom: #636363 1px dotted;
    code {
        display: inline-block;
        margin-bottom: 10px;
        color: $y;
        background: none;
        box-shadow: none;
    }
}
h3 {
    font-family: Georgia;
    font-style: italic;
}
h3 span { font:italic normal 16px 'Source Sans Pro'; }
code { font-size: 1em; }
ul {
    padding: 0;
    list-style-type: none;
}
input {
    width: 30px; height: 30px;
    vertical-align: middle;
    outline: none;
}
input, label { cursor: pointer; }
label {
    padding: 3px 8px 5px;
    border-radius: 2px;
    border: transparent 1px solid;    
    transition: .5s;
    &:hover {
        border: rgba(white,.2) 1px solid;        
    }
}
.example-cntr {
    max-width: 800px;
    margin: 0 auto 50px;
    padding: 30px;
    box-shadow: 0 1px 2px rgba(black,.3);
    background: rgba(black,.15);    
}
.flex-ctnr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
small {
    display: block;
    margin: 20px 0 10px;
    padding-top: 10px;    
    text-align: center;
}

//Set the state of 'indeterminate' to the checkbox
document.getElementsByClassName("indeterminate-choice")[0].indeterminate = true;