$uncheckedColor = $UI.colors.dark
$checkedColor = $UI.colors.primary
$errorColor = $UI.colors.attention
$radioSize = 2u

.root
  &.row
    flex-direction row

.input
  &.row
    margin-left 2u

  &.first
    margin-left 0

.input-input
  align-self flex-start
  padding-top 1u
  padding-bottom @padding-top

.radio
  width 2u
  height @width

  border-color $uncheckedColor
  radius(circle)
  border-width 0.25u
  justify-content center
  align-items center

  &.checked
    border-color $checkedColor

  &.error
    border-color $errorColor

.circle
  radius(circle)
  width ($radioSize / 2)
  height @width
  background-color $checkedColor

  &.error
    background-color $errorColor

.container
  margin-left 1u
  flex-shrink 1

.description
  font(caption)