input[type="checkbox"],
input[type="radio"] {

    & + label {
        transition: all 0.3s ease;
        position: relative;
        cursor: pointer;
        min-height: var(--input-height);
        font-size: var(--input-fontsize);
        font-family: var(--input-fontfamily, var(--font-family));
        color: var(--input-color);
        padding-top: calc(calc(var(--input-height) - var(--input-fontsize)) / 3);
        align-items: flex-start;
        line-height: unset;
    }

    &[readonly] + label { pointer-events: none; }

    &:not([nocheckbox]) + label {
        padding-left: calc(var(--input-height) * 0.8);
    }

    &:not([nocheckbox]) + label::before {
        content: "";
        position: absolute;
        left: 0;
        z-index: 2;
        width: calc(var(--input-height) / 2);
        height: calc(var(--input-height) / 2);
        top: calc(var(--input-height) / 4);
        padding: 0;
        background: var(--input-bg);
        vertical-align: middle;
    }

    &:not([nocheckbox]):checked + label::before {
        --input-bg: var(--input-checked-bg, var(--color-success));
        --input-border-color: var(--input-checked-border, var(--color-success-theme));
    }

    &[emptyerror]:not([nocheckbox]) {
        &:not(:checked) {
            & + label::before {
                --input-bg: var(--color-danger);
                --input-border-color: var(--color-danger-theme);
            }
            & + label::after {
                opacity: 0;
            }
        }
    }

    &:checked + label::after {
        content: "";
        position: absolute;
        z-index: 3;
    }
}
input[type="radio"]:not([nocheckbox]) + label::before {
    border-radius: 50%;
}

input[type="checkbox"]:checked+label::after {
    top: calc(var(--input-height) * 0.375);
    left: calc(var(--input-height) * 0.1);
    width: calc(var(--input-height) * 0.3);
    height: calc(var(--input-height) * 0.15);
    border: calc(var(--input-height) * 0.05) solid var(--color-success-primary);
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
}
input[type="radio"]:checked:not([nocheckbox])+label::after {
    left: calc(calc(calc(var(--input-height)/2) - var(--size)) / 2);
    width: var(--size);
    height: var(--size);
    top: calc(calc(var(--input-height) - var(--size)) / 2);
    padding: 0;
    background: var(--input-bg);
    border-radius: 50%;
}