How to style wrapper when input state is checked?

Question

css

How to style wrapper when input state is checked? When checking for a radio input, the wrapper should be given a background, but how? html

<div class="radio">
                            <input class="radio-custom-input" name="car" type="radio" id="pickup">
                            <label class="radio-custom-label" for="pickup">Самовывоз из магазина <p> ул. Бебеля 17</p></label>
                            <div class="form-order__delivery">
                                <p>Стоимость:<span>бесплатно</span></p>
                            </div>
                        </div>

styles

.radio
    display: flex
    position: relative


    label
        width: 100%
        margin-bottom: 0 !important

.radio+.radio
    margin-top: 8px    

.radio
    padding: 23px 17px
    border: 1px solid $darken-mid-blue
    border-radius: 5px
  
.radio-custom-label
    padding-left: 25px
    font-size: 1rem
    color: #444
    cursor: pointer

.radio-custom-input
    -webkit-appearance: none
    -moz-appearance: none
    appearance: none
    position: absolute


.radio-custom-label:before
    content: ""
    display: block
    width: 19px
    height: 19px
    border: 2px solid $blue
    background-color: #fff
    border-radius: 50%
    position: absolute
    top: 35%
    left: 17px
    z-index: 1
    transition: border .1s linear

.radio-custom-label:after
    content: ""
    display: block
    width: 11px
    height: 11px
    background-color: $blue
    border-radius: 50%
    opacity: 0
    position: absolute
    top: 39%
    left: 21px
    z-index: 2
    transition: opacity .1s linear



.radio-custom-input:checked .radio
    background-color: $light-bright-blue


.radio-custom-input:checked + .radio-custom-label:after
    opacity: 1

Answer 1

1. On JS
2. Apply the style not to the wrapper, but to the pseudo from the label. Make this pseudo absolute, and set the relative to the wrapper.
Then visually it will seem that the wrapper has been painted.