Моdule «checkbox». Checkbox и Radio без js

Демо:

https://codepen.io/ildar-meyker/pen/poZzmgb

 <label class="check-default">
    <span>Бакалавриат</span>
    <input type="checkbox" />
    <i></i>
</label>

<label class="check-default">
    <span>Магистратура</span>
    <input type="checkbox" />
    <i></i>
</label>

<label class="check-default">
    <span>Второе высшее</span>
    <input type="checkbox" />
    <i></i>
</label>

<label class="check-default">
    <span>Дополнительное образование</span>
    <input type="checkbox" />
    <i></i>
</label>

 <label class="check-default">
    <span>Сегодня</span>
    <input name="same" type="radio" />
    <i></i>
</label>

<label class="check-default">
    <span>Завтра</span>
    <input name="same" type="radio" />
    <i></i>
</label>

<label class="check-default">
    <span>На этой неделе</span>
    <input name="same" type="radio" />
    <i></i>
</label>

<label class="check-default">
    <span>На следующей неделе</span>
    <input name="same" type="radio" />
    <i></i>
</label>

.check-default {
    position: relative;
    display: block;
    padding-left: calc(40 / 20) + em;
    margin-bottom: 1.6rem;
    font-size: 2rem;
    line-height: 1.2;
    user-select: none;
    cursor: pointer;

    &:last-child {
        margin-bottom: 0;
    }
}

.check-default input {
    position: absolute;
    height: 0;
    width: 0;
    cursor: pointer;
    opacity: 0;
}

.check-default i {
    transition: all 0.2s;
    position: absolute;
    top: 0;
    left: 0;
    height: calc(24 / 20) + em;
    width: calc(24 / 20) + em;
    border: 1px solid #899ab7;
    border-radius: 0.4rem;
}

.check-default input[type="radio"] ~ i {
    border-radius: 50%;
}

.check-default i:after {
    content: "";
    position: absolute;
    display: none;
    left: 37%;
    top: 11%;
    width: 20%;
    height: 50%;
    border: solid #0047ba;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.check-default input[type="radio"] ~ i:after {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: #0047ba;
    border-radius: 50%;
    border: none;
}

.check-default:hover i {
}

.check-default input:checked ~ i {
}

.check-default input:checked ~ i:after {
    display: block;
}

.check-default input:disabled ~ i {
    opacity: 0.4;
}