How to change label border color when radio is checked?

I need the label's border color to change when the radio inside is selected without using ids.

<!-- begin snippet: js hide: false -->

<!-- language: lang-css -->

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif
}

body {
    height: 100vh;
    padding: 10px
}

.selectable {
    display: flex;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #ddd;
}

.selectable:active {
    border: 1px solid #0d6efd;
}

.selectable:hover {
    background: #20c997;
}

input[type='radio'] {
    width: 22px;
    height: 22px;
    margin-right: 10px;
}

input[type='radio']:before {
    content: '';
    display: block;
    width: 60%;
    height: 60%;
    margin: 20% auto;
    border-radius: 50%;
}

input[type="radio"]:checked:before {
    background: #20c997;
}

input[type="radio"]:checked {
    border-color: #20c997;
}

<!-- language: lang-html -->

<label class="selectable">
    <input type="radio" name="selectable">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, impedit.</span>
</label>
<label class="selectable">
    <input type="radio" name="selectable">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, impedit.</span>
</label>
<label class="selectable">
    <input type="radio" name="selectable">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, impedit.</span>
</label>
<label class="selectable">
    <input type="radio" name="selectable">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, impedit.</span>
</label>

<!-- end snippet -->

This is how a checked radio button should look like. I don't want to use an id, I want to make changes to css only if possible or keep html changes at minimum by adding classes, no ids **.

I tried many things including:

input[type="radio"]:checked + label{
    border-color: #20c997;
}

and

.selectable:checked {
    border-color: #20c997;
}

and nothing is working

Try following selector:

.selectable:has(input:checked){
  border: 2px solid green;
}