/*

-------------------------------------------------------------------------------
 TEMPLATE
-------------------------------------------------------------------------------

<label class="checkbox">
    <input type="checkbox" />
    <span class="checkbox--checked material-icons-outlined">check_box</span>
    <span class="checkbox--blank material-icons">check_box_outline_blank</span>
    <span>LABEL</span>
</label>

<label class="checkbox --disabled">
    <input type="checkbox" disabled />
    <span class="checkbox--checked material-icons-outlined">check_box</span>
    <span class="checkbox--blank material-icons">check_box_outline_blank</span>
    <span>LABEL</span>
</label>

<div validator="required">
    <label class="checkbox">
        <input type="checkbox" data-property="PROPERTY" />
        <span class="checkbox--checked material-icons-outlined">check_box</span>
        <span class="checkbox--blank material-icons">check_box_outline_blank</span>
        <span>* LABEL</span>
    </label>
    <div class="field--error"></div>
</div>

-------------------------------------------------------------------------------
 OPTIONAL CLASS
-------------------------------------------------------------------------------
--disabled
--error
-------------------------------------------------------------------------------
 OPTIONAL STYLE
-------------------------------------------------------------------------------
color : "--hue:270;--saturation:50%" // purple
color : "--hue:210;--saturation:30%" // blue
color : "--hue:120;--saturation:30%" // green
color : "--hue:60;--saturation:50%"  // yellow
color : "--hue:0;--saturation:50%"   // red
-------------------------------------------------------------------------------

*/

label.checkbox{
    --fs: 16px; --space: 2px; --cursor: pointer;
    --message-fs: 12px; --message-space: 2px; --gap: 4px;
    --hue: 0; --saturation: 0%; --lightness: 30%;
    
    display: flex; align-items: center; cursor: var(--cursor);
    font-size: var(--fs); gap: var(--gap);
    color: hsl(var(--hue),var(--saturation),var(--lightness));
}

label.checkbox span{
    overflow: hidden;
}

label.checkbox.--error, .--error label.checkbox {
    --hue: 0; --saturation: 50%; --lightness: 50%;
}

label.checkbox.--disabled, .--disabled label.checkbox {
    --saturation: 0%; --lightness: 80%; --cursor: default;
}

span.checkbox--checked {
    display: none;
}

label.checkbox input[type=checkbox]{
    display: none;
}

input:checked ~ span.checkbox--checked{
    display: inline;
}

input:checked ~ span.checkbox--blank{
    display: none;
}