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

/* label */
.bb-form-field.-checkbox-radio + label {
    padding-left:calc(var(--form-choice-size) + 15px); position:relative; cursor:pointer;
    display:inline-block;
    font-size:16px; font-weight:500; color:rgba(255, 255, 255, .5);
}
.bb-form-field.-checkbox-radio + label a {color:rgba(255, 255, 255, .5);}
.bb-form-field.-checkbox-radio + label a:hover, .bb-form-field.-checkbox-radio + label a:focus {color:#fff;}

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

/* :hover:focus */
.bb-form-field.-checkbox-radio:focus + label:before,
.bb-form-field.-checkbox-radio:hover + label:before {
    background:var(--form-bg-hover);
    border-color:var(--form-border-color-hover);
}

/* :checked */
.bb-form-field.-checkbox-radio:checked + label:before,
.bb-form-field.-checkbox-radio:checked:hover + label:before,
.bb-form-field.-checkbox-radio:checked:focus + label:before {
    background:var(--form-choice-bg-active);
    --form-border-color-hover:var(--form-choice-bg-active);
    --form-border-color:var(--form-choice-bg-active);
}

/* :checked:hover:focus */
.bb-form-field.-checkbox-radio:checked:hover + label:before,
.bb-form-field.-checkbox-radio:checked:focus + label:before {
    background:var(--form-choice-bg-active); border-color:var(--form-choice-bg-active);
}


/* checked icon */
.bb-form-field.-checkbox-radio + label:after {
    position:absolute; top:6px; left:5px; display:inline-block;
    content:"\e932"; font-family:var(--bb-font-icomoon); font-size:9px;
    width:var(--form-choice-size); aspect-ratio:1; line-height:var(--form-choice-size);
    background:transparent; color:var(--form-choice-color);
    transition:all .1s ease;
}

/* :checked */
.bb-form-field.-checkbox-radio:not(:checked) + label:after {
    transform:translateY(3px) rotate(-25deg) scale(.5);
    opacity:0;
}


/* error:not(:checked) */
.bb-form-field.-checkbox-radio.-error:not(:checked):not(:focus-visible) + label:before {
    box-shadow:0 0 0 1px var(--form-color-error);
    --form-border-color:var(--form-color-error);
    --form-border-color-hover:var(--form-color-error);
}

/* a11y */
.bb-form-field.-checkbox-radio:focus-visible + label:before {
    box-shadow:0 0 0 1px var(--bb-color-white);
}


/*********************************************
 * Checkbox
**********************************************/
.bb-form-field[type="checkbox"] + label {
    --form-radius:5px;
}


/*********************************************
 * Radio
**********************************************/
.bb-form-field[type="radio"] + label {--form-radius:50%;}
.bb-form-field[type="radio"] + label:after {
    content:""; top:9px;
    width:8px; background:var(--bb-color-white); border-radius:50%;
}