Reducing specificity of button selectors

[mayank99]

Currently, the long button selectors make it really hard to add custom styles.

Some requirements:

• button icon should have a specificity of 0-1-0 (by adding a flat level class).
• there should be a modifier for the default button (e.g. .iui-button.iui-default) so we can reference it directly without :not(.iui-cta):not(.iui-borderless):not(.iui-high-visibility).
• hover and focus states should have lower specificity across the board, to allow easier overrides for component-specific use cases (e.g. in split header button) as well as user's custom use cases (e.g. different hover color).

[mayank99]

Found another related problem (https://github.com/iTwin/iTwinUI/pull/253#discussion_r699658717): Currently, it's very hard to override size/padding of any button. For example, a small borderless button has a specificity of 0-3-0 (.iui-button.iui-borderless.iui-small).

Unsure how this could be solved though. Maybe the user should not use small if they want to override styles. And then we could change the .iui-button.iui-borderless selector to just button.iui-borderless (0-1-1, easier to override). Edit: this was solved by adding the ability to set size through iui-button-size mixin rather than forcing class names.