Psl 1468 css improvements from enes feedback

[deomsj]

✅ make css selectors less specific so they can be easily overridden
✅ add position absolute to dropdown
✅ hide the dropdown when there are no results to display
✅ ability to pass custom class name to container element
✅ ability to opt out of default styles
✅ ability to extend default styles
✅ update readme image to new custom styles story w/ gif

[linear]

PSL-1468 CSS: Improvements from Enes feedback

Business Outcome:

As Enes I want easy way for customers to override default styles and and pass their own styles so that they have better developer experience

Definition of done:

• ✅ make css selectors less specific so they can be easily overridden
• ✅ add position absolute to dropdown
• ✅ hide the dropdown when there are no results to display
• ✅ ability to pass custom class name to container element
• ✅ ability to opt out of default styles
• ✅ ability to extend default styles
• 🤷 BONUS: click outside closes the dropdown (specifically with clicking in browser dev tools?)

Additional Notes:

• Enes had added absolute to the container for the whole thing for the position dropdown. This could be a potential solution. More detail on this here: https://constructor.slack.com/archives/C04B29BNW9H/p1671740304694919

[gardensgreen]

Everything looks great aside for small grammatical error I pointed out within comment below .

Nice work! :D

[gardensgreen]

This library provides some default styles. These default styles can provide as a foundation to build on top of or just as a reference for you to replace completely. All default styles in this library are scoped within the `.cio-autocomplete` css selector.

->

This library provides some default styles. These default styles can be used as a foundation to build on top of or just as a reference for you to replace completely. All default styles in this library are scoped within the `.cio-autocomplete` css selector.

[gardensgreen]