Enable triggering hover state on Checkbox and Radio externally

We need to be able to trigger hover state on the Checkbox and Radio with external component.

There is a way of doing that without js. We could use CSS classes and apply hover state styles whenever element with particular class gets hovered. These hover state styles are already defined in Radio and Checkbox - hover state is detected on the `&__wrapper` and style changes are being applied on the `.sg-radio__circle`/`.sg-checkbox__icon`. So it looks like this:
```
&__wrapper {
&:hover {
.sg-radio__circle {
...
}
}
}
```
We could use `@at-root` sass mechanism that allows prepending selectors, which will enable reusing the same styles, just in different context. So prepending that `&__wrapper` selector with `@at-root .sg-hover-group`:
```
@at-root .sg-hover-group,
&__wrapper {
&:hover {
.sg-radio__circle {
...
}
}
}
```

will result in creating such selectors:

```
.sg-hover-group:hover .sg-radio__circle,
.sg-radio__wrapper:hover .sg-radio__circle {
...
}
```

Then, if we want to trigger Checkbox/Radio hover state on some component mouseover, we can just add `.sg-hover-group` class to it.