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

    span {
        box-sizing       : border-box;
        position         : relative;
        display          : block;
        width            : 14px;
        height           : 14px;
        border           : 1px solid #444444;
        box-shadow       : inset 0 0 0 1px #000000, inset 0 0 0 2px rgba(34, 34, 34, 0.93);
        background-color : #000000;
        cursor           : pointer;

        &:after {
            content  : "";
            display  : none;
            position : absolute;
        }
    }

    input {
        display: none;

        &:checked + span:after { display: block; }
        &:disabled + span {
            background-color : #727272;
            cursor           : default;
        }
    }
}

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

    span:after {
        transform     : rotate(315deg);
        top           : 3px;
        left          : 2px;
        width         : 6px;
        height        : 2px;
        z-index       : 1;
        padding       : 0;
        border-bottom : 2px solid #ffffff;
        border-left   : 2px solid #ffffff;
        margin        : 0;
    }
}

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

        &:after {
            top              : 50%;
            left             : 50%;
            width            : 4px;
            height           : 4px;
            border           : 0;
            border-radius    : 50%;
            margin           : -2px 0 0 -2px;
            background-color : #ffffff;
        }
    }

    input:checked:after { display: block; }
}