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

    span {
        .outline(#dddddd);

        box-sizing : border-box;
        position   : relative;
        display    : block;
        float      : left;
        width      : 14px;
        height     : 14px;
        cursor     : pointer;

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

    input {
        display: none;

        &:checked + span {
            .outline(#eeeeee);
            background-color: #eeeeee;
        }

        &:disabled + span {
            .outline(#aaaaaa);
            cursor: default;
        }
    }

    .label { margin-left: 19px; }
}

.checkbox {
    input:checked + span:after {
        width           : 14px;
        height          : 14px;
        background      : url("img/check.svg") no-repeat -1px -1px;
        background-size : 16px;
    }
}

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

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