.form {
    &-group {
        &--radio {padding-left: 25px; position:relative; width:100%; display: inline-block; margin-bottom:10px;
            @media only screen and (min-width: 680px) {padding-left: 50px;}
            input {
                &[type="radio"] { cursor: pointer; position: absolute; z-index: 1; margin: 0; opacity: 0; top: -1px; left: -1px; width: 22px; height: 22px;
                    @media only screen and (min-width: 680px) { top: -2px; left: -2px; width: 44px; height: 44px; }
                    &:focus {
                        +.form-label-radio:before { box-shadow: 0 0 0 4px #FFBF47; border-width:4px; }
                    }
                    &:checked {
                        +.form-label-radio:after {opacity:1;}
                    }
                }
            }
            &:hover, &:focus {
                label {cursor:pointer;}
            }
            &.display {
                > .panel {display: block; visibility: visible;
                    div {position: relative;}
                }
            }
            .option--sub {
                &.display {
                    > .panel {display: block; visibility: visible;
                        div {position: relative;}
                        label {padding-left:0;}
                    }
                }
            }
            .panel {
                &-border {
                    &-narrow {margin-bottom:20px !important; }
                    &-error { border-color:$red; }
                }
                div {
                    label {padding-left: 25px; line-height: 22px;
                        @media only screen and (min-width: 680px) {padding-left: 50px; line-height: 40px;}
                    }
                    &:last-of-type {
                        label {margin-bottom:0;}
                    }
                }
            }
        }
        .error-message { visibility: hidden; display: none; }
        &-error {
            .error-message {display:block; visibility: visible;}
        }
    }
    &-label {
        &-radio {
            &:before, &:after {content: ""; position: absolute;}
            &:before { -webkit-box-sizing: border-box; box-sizing: border-box; top: 0; left: 0; width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 50%; background: transparent;
                @media only screen and (min-width: 680px) {width: 40px; height: 40px;}
            }
            &:after { top: 5px; left: 5px; width: 0; height: 0; border: 5px solid currentColor; border-radius: 50%; opacity: 0; background: currentColor;
                @media only screen and (min-width: 680px) {top: 10px; left: 10px; border: 10px solid currentColor;}
            }
        }
    }
}

.form-group {
    &.active {
        .panel {display: block; visibility: visible;}
    }
}