.checkbox,
.radio {
    user-select    : none;
    display        : inline-block;
    vertical-align : middle;

    span {
        box-sizing       : border-box;
        position         : relative;
        display          : block;
        width            : 16px;
        height           : 16px;
        border           : 1px solid #d6d8dd;
        background-color : #ffffff;
        cursor           : pointer;

        &:after {
            content  : "";
            position : absolute;
            top      : 0;
            left     : 0;
        }
    }

    input {
        display: none;

        &:checked + span { border-color: #525266; }
        &:disabled + span {
            background-color : #d6d8dd;
            cursor           : default;
        }
    }
}

.checkbox {
    span {
        border-color: #aaaab0;
        border-radius: 2px;
    }

    input:checked {
        &:disabled + span:after { background-color: #aaaab0; }
        & + span {
            &:after {
                width      : 14px;
                height     : 14px;
                background : url("img/check_new.svg") no-repeat;
            }
        }
    }
}

.radio {
    span { border-radius: 50%; }

    input:checked {
        &:disabled + span { background-color: #aaaab0; }
        & + span:after {
            width            : 4px;
            height           : 4px;
            margin           : 5px;
            border-radius    : 50%;
            background-color : #000000;
        }
    }
}

/* Sizes ------------------------------ */
.checkbox-w20-h20 span,
.radio-w20-h20 span{
    width  : 20px;
    height : 20px;
}

.checkbox-w20-h20 input:checked + span:after {
    width           : 18px;
    height          : 18px;
    background-size : 18px;
}

.radio-w20-h20 input:checked + span:after {
    width  : 6px;
    height : 6px;
    margin : 6px;
}