refactor(btn-group): bundle styles with component

[SisIvanova]

Closes #15267

Additional information (check all that apply):

• Bug fix
• New functionality
• Documentation
• Demos
• CI/CD

Checklist:

• All relevant tags have been applied to this PR
• This PR includes unit tests covering all the new code (test guidelines)
• This PR includes API docs for newly added methods/properties (api docs guidelines)
• This PR includes feature/README.MD updates for the feature docs
• This PR includes general feature table updates in the root README.MD
• This PR includes CHANGELOG.MD updates for newly added functionality
• This PR contains breaking changes
• This PR includes ng update migrations for the breaking changes (migrations guidelines)
• This PR includes behavioral changes and the feature specification has been updated with them

[adrianptrv]

It seems that the Button Group theme function parameters are not working. Their values get declared, but it appears that the current theme variables have higher specificity than the parameter vars, and they always get applied instead of them.

Another issue I found is that when using the Bootstrap theme, if a button is focused and then hovered over, its background color stays with the “focus” color and doesn’t change to the hover color. The same issue occurs if the button is also selected.
It happens in both the light and dark Bootstrap themes, but it works fine in master.

IgniteuiDevDemos.5.mp4

[adrianptrv]

I noticed that when we apply the Indigo light theme, the --ig-theme variable is set to "material" instead of "indigo." As a result, the button text appears like the Material one, and the Material layer is applied instead of the Indigo one when focusing on a button.

I think it's coming from the meta lines in the button group light schema in the theming repo:

https://github.com/IgniteUI/igniteui-theming/blob/bc4d955d8a5817b56c60327bfcb06b0aaf3c538d/sass/themes/schemas/components/light/_button-group.scss#L1007

---

Also the $item-hover-border-color parameter doesn’t seem to work. Its value is declared, but it isn’t applied to the element when hovering over it. The default border color remains applied, even on hover.

On master it's working fine.

[SisIvanova]

I noticed that when we apply the Indigo light theme, the --ig-theme variable is set to "material" instead of "indigo." As a result, the button text appears like the Material one, and the Material layer is applied instead of the Indigo one when focusing on a button.

I think it's coming from the meta lines in the button group light schema in the theming repo:

This issue is fixed in a separate PR - IgniteUI/igniteui-theming#402