.checkbox, .radio {
    opacity: 0;
    display: inline-block;
    position: absolute;
}

.radio__label, .checkbox__label{
    display: table;

    & > *{
        display: table-cell;
    }
}

.radio:focus ~ .radio__label .radio__icon:before{
    border-color: $radioCheckBorder--active;
}

.checkbox:focus ~ .checkbox__label .checkbox__icon:before{
    border-color: $radioCheckBorder--active;
}

.checkbox, .checkbox__label, .radio, .radio__label {
    vertical-align: middle;
    cursor: pointer;
}

.checkbox__label, .radio__label {
    position: relative;
}

.checkbox__label .checkbox__icon:before, .radio__label .radio__icon:before {
    content: '';
    background: $radioCheckBg;
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
    border-radius: $radius;
    border: 1px solid $radioCheckBorder;
}

.checkbox:checked ~ .checkbox__label .checkbox__icon:before {
    background: $radioCheck;
    box-shadow: inset 0px 0px 0px 3px $radioCheckBg;
    border-radius: $radius;
}

.radio ~ .radio__label .radio__icon:before {
    border-radius: 50%;
}

.radio:checked ~ .radio__label .radio__icon:before {
    background: $radioCheck;
    box-shadow: inset 0px 0px 0px 3px $radioCheckBg;
}

/* Fixes ios fastclick bug when label has inner phrasing content tags */
label > * { pointer-events:none; }