scratch-www/src/components/forms/radio-group.scss

@import "../../colors";

.row {
    .radio {
        label {
            font-weight: 300;
        }
    }

    .col-sm-9 {
        display: flex;
        flex-flow: row wrap;

        input {
            &[type="radio"] {
                margin-top: 1px;
                border: 1px solid $active-gray;
                border-radius: 50%;
                width: .875rem;
                height: .875rem;
                appearance: none;

                &:checked,
                &:focus {
                    outline: none;
                }

                &:checked {
                    transition: all .25s ease;
                    box-shadow: 0 0 0 .25rem $active-gray;
                    background-color: $ui-blue;

                    &:after {
                        display: block;
                        transform: translate(.25rem, .25rem);
                        border-radius: 50%;
                        background-color: $ui-white;
                        width: .25rem;
                        height: .25rem;
                        content: "";
                    }
                }
            }
        }
    }
}