Cacher is the code snippet organizer for pro developers

<form action="">
    <div class="survey-option">
        <input type="radio" name="survey" id="option1">
        <div class="check"></div>
        <label for="option1">Cicero are also reproduced in their exact original form</label>
    </div>
    <div class="survey-option">
        <input type="radio" name="survey" id="option2">
        <div class="check"></div>
        <label for="option2">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for</label>
    </div>
    <div class="survey-option">
        <input type="radio" name="survey" id="option3">
        <div class="check"></div>
        <label for="option3">The point of using Lorem Ipsum is that it has a</label>
    </div>
    <div class="survey-option">
        <input type="radio" name="survey" id="option4">
        <div class="check"></div>
        <label for="option4">Various versions have evolved over the years, sometimes by</label>
    </div>
    <button type="submit" class="lg orange">Responder</button>
</form>

form {
    .survey-option {
        display: flex;

        &:hover .check {
            border: 2px solid #d95234;
        }

        input {
            position: absolute;
            visibility: hidden;

            &:checked {
                ~.check {
                    border: 2px solid #d95234;

                    &::before {
                        background: #d95234;
                        height: 10px;
                        width: 10px;
                        margin: 2px auto;
                    }
                }

                ~label {
                    color: #d95234;
                }

            }
        }

        .check {
            display: block;
            border: 2px solid #AAAAAA;
            background: white;
            border-radius: 100%;
            height: 17px;
            min-width: 17px;
            margin-right: 10px;
            transition: border .25s linear;
            -webkit-transition: border .25s linear;

            &::before {
                display: block;
                content: '';
                border-radius: 100%;
                height: 100%;
                width: 100%;
                margin: 2px auto;
                transition: background 0.25s linear;
                -webkit-transition: background 0.25s linear;
            }
        }

        label {
            font-family: Nunito;
            font-size: 14px;
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            line-height: normal;
            letter-spacing: normal;
            color: #626262;
            cursor: pointer;
        }




    }

    button {
        margin-top: 15px;
    }
}