/*********************
 * Choice (Checkbox & Radio buttons)
**********************/
/* hide default input */
.ifs-form-field.-checkbox-radio {position:absolute; opacity:0; width:0; pointer-events:none;}

/* label */
.ifs-form-field.-checkbox-radio + label {
    font-size:var(--form-font-size);
    position:relative; cursor:pointer;
    padding-left:calc(var(--form-choice-size) + 6px);
    display:inline-block;
}

/* box */
.ifs-form-field.-checkbox-radio + label:before {
    content:"";
    display:inline-flex;align-items:center;justify-content:center;
    width:var(--form-choice-size); aspect-ratio:1; background:var(--form-bg);
    color:rgba(0, 0, 0, 0);transition:all .3s ease;line-height:1;
    box-shadow:inset 0 0 0 var(--form-border-width) var(--form-border-color);
    font-family:var(--ifs-font-icomoon), fantasy;font-size:calc(var(--form-choice-size) * 0.6);
    position:absolute; left:0;
    top:calc(1.6 * var(--form-font-size) / 2);
    /* 1.5 is line height of element label, must use font size and line height of label (not label's before) */
    transform:translateY(-50%);
}

/* :hover:focus */
.ifs-form-field.-checkbox-radio:where(:not(:checked):focus, :not(:checked):hover) + label:before {
    --form-border-color:var(--form-border-color-hover);
}

/* :checked */
.ifs-form-field.-checkbox-radio:checked + label:before {
    --form-border-width:var(--form-choice-size);
    --form-border-color:var(--form-border-color-hover);
}

/* :checked:hover:focus */
.ifs-form-field.-checkbox-radio:where(:checked:hover, :checked:focus) + label:before {}

/* error:not(:checked) */
.ifs-form-field.-checkbox-radio.-error:not(:checked) + label:before {
    --form-border-width:1px;
    --form-border-color:var(--form-color-error);
}

/* a11y */
.ifs-form-field.-checkbox-radio:focus-visible + label:before {}


/*********************************************
 * Checkbox
**********************************************/
/* checked icon */
.ifs-form-field[type="checkbox"] + label:before {
    content:"\e932";
    color:var(--form-choice-color);
}

/* :checked */
.ifs-form-field[type="checkbox"]:not(:checked) + label:before {color:rgba(0, 0, 0, 0);}


/*********************************************
 * Radio
**********************************************/
.ifs-form-field[type="radio"] + label:before {border-radius:50%;}
.ifs-form-field[type="radio"]:checked + label:before {
    --form-border-width:calc(var(--form-choice-size) * 0.3);
}