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

/* label */
.vii-form-field.-checkbox-radio + label {
    --form-border-color:var(--vii-color-dark-blue);
    --form-border-color-hover:var(--vii-color-primary);
    --form-radius:4px;

    padding-left:calc(var(--form-choice-size) + 8px); position:relative; cursor:pointer;
    display:inline-block;
}

/* box */
.vii-form-field.-checkbox-radio + label:before {
    position:absolute; top:2px; left:0;
    content:""; display:inline-block;
    width:var(--form-choice-size); aspect-ratio:1; border-radius:var(--form-radius);
    transition:all .3s ease;
    box-shadow:inset 0 0 0 0.1em var(--form-border-color);
}

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

/* :checked */
.vii-form-field.-checkbox-radio:checked + label:before {
    --form-border-width:var(--form-choice-size);
    --form-border-color:var(--vii-color-dark-blue);

    background:var(--form-choice-bg-active);
}

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


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

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


/*********************************************
 * Checkbox
**********************************************/
/* checked icon */
.vii-form-field[type="checkbox"] + label:after {
    position:absolute; top:1px; left:0; display:inline-flex; align-items:center; justify-content:center;
    content:"\e932"; font-family:var(--vii-font-icomoon), fantasy; font-size:12px;
    width:var(--form-choice-size); aspect-ratio:1; line-height:1;
    background:transparent; color:var(--form-choice-color);
    transition:all .1s ease;
    transform:translate(0, 1px);
}

/* :checked */
.vii-form-field.-checkbox-radio:not(:checked) + label:after {opacity:0;}


/*********************************************
 * Radio
**********************************************/
.vii-form-field[type="radio"] + label:before {border-radius:50%;}
.vii-form-field[type="radio"] + label:after {
    content:'';
    width:8px; aspect-ratio:1; background:var(--vii-color-white); border-radius:50%;
    position:absolute; top:7px; left:5px;
    transition:var(--vii-transition);
}