Radio - fix paddings, margins, gaps & use correct css

[thrbnhrtmnn]

Description / User story

During #1039 a couple of issues with the radio were found, that we want to fix with this issue:

1. By default, the label element comes with a small amount of padding to the left and right of it. By setting padding to 0 on the legend element (line 44 in radio.css.ts) then the legend will be flush with the radio inputs like in the design. This will work on both horizontal and vertical layouts
2. It looks like we're not using index.css.ts within the radio group directory. All of the styles associated with radio group come from either form.css or radio.css
3. It looks like we're not using the input control margin that's provided in figma. It only appears in md and lg. It is set to 0 on sm. Instead of using margin, we could simply add align-items: center; to .blr-radio on line 141 in radio.css.ts. That will automatically vertically align everything.
4. There are some notes in the radio.css.ts file saying FIX: "We need to differentiate between horizontal and vertical gaps, but this seems all wrong anyhow"; for now, the gaps look correct, but we need to double check this with design.
5. In the Figma file, I can see that we have individual hints per radio input. In storybook, we only have one global hint at the bottom. We need to double check what the functionality should be. > this should be fixed with RadioGroup - use slots to have Radios in RadioGroup & add API to change/reset checked values of radios #507 , then the functionality of the Radio component to have hints should be also visible in the radio group

Requirements / Prerequisites

• none

Acceptance Criteria

• Acceptance Criteria 1
• ...

Additional information

• ...

Code of Conduct

• I agree to follow this project's Code of Conduct