.radio-group
  display: flex
  flex-direction: column
  gap: 8px

  &__label
    color: hsl(240 6% 10%)
    font-size: 14px
    font-weight: 500
    user-select: none

  &__description
    color: hsl(240 5% 26%)
    font-size: 12px
    user-select: none

  &__error-message
    color: hsl(0 72% 51%)
    font-size: 12px
    user-select: none

  &__items
    display: flex

.radio
  display: flex
  align-items: center

  &__control
    display: flex
    align-items: center
    justify-content: center
    height: 20px
    width: 20px
    border-radius: 10px
    border: 1px solid hsl(240 5% 84%)
    background-color: hsl(240 6% 90%)
    // margin: 2rem

  &__input:focus-visible + &__control
    outline: 2px solid #33475a
    outline-offset: 2px

  &__control[data-checked]
    border-color: #33475a
    background-color: #577693

  &__control[data-checked][data-invalid]
    border-color: #33475a
    background-color: hsl(0 72% 51%)

  &__indicator
    height: 10px
    width: 10px
    border-radius: 5px
    background-color: white

  &__label
    margin-left: 8px
    color: #ffffff
    font-size: 1rem
    user-select: none
