.ca-input-radio {
  $block: &;

  &__value {
    position: relative;
    padding-left: 30px;
    margin-left: -30px;
    display: inline-block;
    line-height: 20px;
    cursor: pointer;

    &::before {
      content: '';
      display: block;
      width: 20px;
      height: 20px;
      box-shadow: 0 0 0 1px $c-border-dark;
      background-color: $c-white;
      border: 4px solid $c-white;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 50%;
      transition: background-color 150ms ease, box-shadow 150ms ease;
      box-sizing: border-box;
    }

    &:hover {
      &::before {
        box-shadow: 0 0 0 1px $c-medium-gray;
        background-color: $c-medium-gray;
      }
    }
  }
  
  &__button {
    display: none;

    &:checked + #{$block}__value {
      &::before {
        box-shadow: 0 0 0 1px $c-input-radio-checked-bg;
        background-color: $c-input-radio-checked-bg;
      }
    }
  }

  &__wrap {
    padding-left: 30px;

    & + & {
      margin: $px10 0 0;
    }
  }

  &__description {
    color: $c-text-secondary;
    margin-top: 3px;
  }
}