@import '~styles/base'

$radio-button-size: 20px

.RadioGroup

    .RadioGroup__field
        display: block
        color: color(text-disabled)

        &.RadioGroup__field--active
            color: color(text-primary)
            transition: color $key-animation-duration $key-bezier-animation-in

    .RadioGroup__label
        display: inline-block
        +clickable

    .Radio
        display: inline-block
        margin-right: 8px
        // position: relative
        // top: 100%
        // margin-top: -50%

        &.Radio--active .Radio__circle::after
            border: 2px solid color(primary)
            transform: scale(1)
            transition: transform $key-animation-duration $key-bezier-animation-in

        .Radio__circle
            +circle($radio-button-size)
            background: grey(9)
            position: relative
            border: 2px solid grey(9)

            &::after
                content: ''
                top: -2px
                left: -2px
                position: absolute
                border: 2px solid transparent
                +circle($radio-button-size - 2px)
                transform: scale(0)
                transition: transform $key-animation-duration $key-bezier-animation-out

@import '~styles/base'

$radio-button-size: 20px

.RadioGroup

    .RadioGroup__field
        display: flex
        align-items: center
        color: color(text-disabled)

        &.RadioGroup__field--active
            color: color(text-primary)
            transition: color $key-animation-duration $key-bezier-animation-in

        &:hover .Radio__circle
            background: grey(7)
            border: 2px solid grey(8)

    .RadioGroup__label
        display: inline-block
        +clickable

    .Radio
        display: inline-block
        margin-right: 8px
        // position: relative
        // top: 100%
        // margin-top: -50%

        &.Radio--active .Radio__circle::after
            border: 2px solid color(primary)
            transform: scale(1)
            transition: transform $key-animation-duration $key-bezier-animation-in

        .Radio__circle
            +circle($radio-button-size)
            background: grey(9)
            position: relative
            border: 2px solid grey(9)
            transition: background-color $key-animation-duration ease-out

            &::after
                content: ''
                top: -2px
                left: -2px
                position: absolute
                border: 2px solid transparent
                +circle($radio-button-size - 4px)
                transform: scale(0)
                transition: transform $key-animation-duration $key-bezier-animation-out

Make active circle the same size as its parent
fix(RadioGroup): Make active circle the same size as its parent
