.radio-button
  display inline-block
  position relative
  cursor pointer
  user-select none

  &-element
    display none

  &-container
    padding-left 29px
    position relative
    user-select none

    &:before
      content ""
      width 20px
      height 20px
      box-sizing border-box
      background-color white
      border 2px solid b2c-cool-grey
      border-radius 50%
      position absolute
      top 50%
      left 0
      transform translateY(-50%)

    &:after
      content ""
      width 10px
      height 10px
      box-sizing border-box
      border-radius 50%
      position absolute
      top 50%
      transform translateY(-50%)
      left 5px
      transition-timing-function ease-in-out
      transition-duration .2s
      transition-property background, opacity, visibility

    .radio-button-element:checked+&
      &:after
        background-color b2c-purple
        opacity 1
        visibility visible

        .{newAppName}-dark-theme &
          background-color b2c-orange

    .radio-button-element[disabled]+&
      cursor default

      .{newAppName}-dark-theme &
        opacity .4

      &:before
        border-color b2c-cool-grey05

      &:after
        background-color b2c-cool-grey

        .{newAppName}-dark-theme &
          background-color main-color

      color b2c-cool-grey