.radio-input-container:after,
.radio-input-container:before {
    box-sizing: border-box;
}

.radio-input-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.radio-input-container .kzvn-radio-label {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    cursor: pointer;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}


.radio-input-container .kzvn-radio-label input {
    display: none;
}


.radio-input-container .kzvn-radio-label input:checked + span {
    background-color: var(--kzvn-green-color-shade-20pct);
}

.radio-input-container .kzvn-radio-label input:checked + span:before {
    box-shadow: inset 0 0 0 0.3rem var(--kzvn-green-color);
}


.radio-input-container .kzvn-radio-label span {
    display: flex;
    flex: 1;
    text-transform: capitalize;
    align-items: center;
    padding: .5rem;
    border-radius: .3rem;
    transition: 100ms ease-in;
}

@supports not (gap: 0.7rem) {
    .radio-input-container .kzvn-radio-label span > * {
        margin-right: 0.7rem;
    }
    .radio-input-container .kzvn-radio-label span > *:last-child {
        margin-right: 0;
    }
}

@supports (gap: 0.7rem) {
    .radio-input-container .kzvn-radio-label span {
        gap: 0.7rem;
    }
}


.radio-input-container .kzvn-radio-label span i {
    font-size: 2rem;
}

.radio-input-container .kzvn-radio-label span:hover {
    background-color: var(--kzvn-green-color-shade-20pct);
}

.radio-input-container .kzvn-radio-label span:before {
    display: flex;
    flex-shrink: 0;
    content: "";
    background-color: var(--white-color);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    transition: 100ms ease-out;
    box-shadow: inset 0 0 0 0.15rem black;
}