How assign styles to parent label based on input state

Question

I have the following input and label:

<label styleName="checkbox-label">
    <input styleName="checkbox-input" type="checkbox" />
    Some label here!
</label>

Now I want to change the style of the label based on the state of the input (checked or unchecked).

I have tried several things, including:

.checkbox-label input.checkbox-input {
    margin-right: 6px;
    accent-color: #7D2A16;
    height: 15px;
    width: 15px;
    position: relative;
    top: 2px;
}

.checkbox-label input.checkbox-input:checked {
    background: #0db87f;
    border: 1px solid red;
    margin: 10px;
    color: red;
}

But the problem with that code is that it targets the input element, not the label itself. I searched for a parent selector, but it has too few support to use it (see this question).

Do you know any idea how to do this with pure CSS? I'm using React, so I can implement this easily on the component, but I would like for the styling logic to be kept in the styling file.