input[type=radio], input[type=checkbox] {
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    border: 0;
    width: 30px;
    height: 30px;
}

input[type=radio]::before, input[type=radio]::after {
    content: "";
    display: inline-block;
    border-radius: 50%;
}

input[type=radio]::before {
    content: "";
    width: 100%;
    height: 100%;
    border: solid 1px var(--color-mono-4);
    box-sizing: border-box;
}

input[type=radio]::after{
    position: absolute;
    width: 65%;
    height: 65%;
    left: calc(35% / 2);
    top: calc(35% / 2);
    background-color: transparent;
    transition: 100ms;
}

input[type=radio]:checked::after {
    background-color: var(--color-selecting);
}

input[type=checkbox]::before, input[type=checkbox]::after {
    content: "";
    display: inline-block;
    box-sizing: border-box;
}

input[type=checkbox]::before {
    width: 30px;
    height: 30px;
    border: solid 1px var(--color-mono-4);
}

input[type=checkbox]::after{
    position: absolute;
    left: calc((30px - 18px) / 2);
    top: calc((30px - 18px) / 2);
    color: transparent;
    transition: 100ms;
    content: "\f00c";
    font-family: var(--font-awesome);
    font-weight: 900;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
}

input[type=checkbox]:checked::after {
    color: var(--color-mono-8);
}