Enable triggering hover state on Checkbox and Radio externally

[domidomi]

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.