input[type=radio],
input[type=checkbox] {
    width: 1.5em;
    height: 1.5em;
    margin-right: .75em;
    vertical-align: middle;

    border: 0;

    -webkit-appearance: none !important;
       -moz-appearance: $white;

    &:focus {
        outline: none;

        &:after {
            border: 2px solid color($gray);
        }
    }

    &:checked {
        &:before {
            transform: scale(1);
        }
    }

    &:after {
        content: '';

        position: absolute;
        top: 0;
        left: 0;
        width: 1.5em;
        height: 1.5em;
        overflow: hidden;

        background: $white;
        border: 2px solid color($gray, light);
        box-shadow: inset 0 3px color($gray, default, .15), 0 3px rgba($black, .05);
    }

    &:before {
        position: absolute;
        z-index: 2;

        transform: scale(0);
        transition: transform .1s;
    }

    &[disabled] {
        &:after {
            background: rgba($text-color, .2);
            border-color: transparent;
            box-shadow: none !important;
        }
    }
}

input[type=checkbox] {
    &:after {
        border-radius: border-radius(s);
    }

    &:before {
        content: '\f00c'; //check

        width: 100%;

        color: color($green);

        font-family: font-family(icons);
        font-size: font-size(m);
        line-height: 1.5;
        text-align: center;
    }
}

input[type=radio] {
    &:after {
        border-radius: 100%;
    }

    &:before {
        content: '';

        top: 6px;
        right: 6px;
        bottom: 6px;
        left: 6px;

        background: color($green);
        border-radius: 100%;
    }
}