Closes #18887

- Less nesting with more specific classes
- New class names for most elements to avoid unnecessary and potentially confusing shorthand
- Require new class and markup for the description (though it's only necessary for disable states, it's now part of the entire component's markup for all states just in case)
- Change up colors and variables for regular and disabled states

[skip sauce]
[skip validator]

Both widgets need to use the same border width because of input groups.
Thus:
$btn-border-width   => $input-btn-border-width
$input-border-width => $input-btn-border-width

[skip sauce]

Fixes part of #18150

[skip sauce]
[skip validator]

This:
```
<div class="bg-info">
	<select class="c-select">
		<option selected>Open this select menu</option>
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
	</select>
</div>
```
render this:
http://s.zalog.ro/2015-10-14-19-45-11.png

[ci skip]

Fix #17052

Bump mq4-hover-shim to ^0.2.0

Revert "fix dist css"
This reverts commit b12d4bfa.