/*
<div class="sbm_checkbox">
	Texto del checkbox <input type="checkbox" id="cb_1" />
	<label for="cb_1"></label>
</div>
*/

.sbm_checkbox {
    --sbm-checkbox-wh: 26px;
    --sbm-checkbox-bg-off: #ffffff;
    --sbm-checkbox-bg-on: orange;
    --sbm-checkbox-border-size: 3px;
    --sbm-checkbox-border-color: black;
    --w-tic: 7px;
    --h-tic: 14px;
    --b-tic: 3px;

    position:relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    height: var(--sbm-checkbox-wh);
    padding-left: calc(var(--sbm-checkbox-wh) + 10px);
    font-weight: 600;
    & input { display: none; }

    & label {
        /* display: block; */
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: transparent;
        z-index: 999;
        cursor: pointer;
    }
    
    &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        box-sizing: border-box;
        width: var(--sbm-checkbox-wh);
        height: var(--sbm-checkbox-wh);
        border: 3px solid black;
        background-color: var(--sbm-checkbox-bg-off);
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
    }
    
    & input:checked ~ label::after {
        content: '';
        position: absolute;
        width: var(--w-tic);
        height: var(--h-tic);
        box-sizing: border-box;
        border: none;
        
        border-right: var(--b-tic) solid orange;
        border-bottom: var(--b-tic) solid orange;
        z-index: 100;
    
        background-color: none;
    
        transform: translateX(calc( (var(--sbm-checkbox-wh) - (.7 * (var(--w-tic) + var(--h-tic)))) / 2 + var(--w-tic) / 2 + (1px)) ) translateY(calc( (var(--sbm-checkbox-wh) - (.7 * (var(--w-tic) + var(--h-tic)))) / 2 - (1px))) rotate(45deg);
        
    }
}