hide-on & show-on seem to break anything that isn't set as display block

When using `hide-on` and `show-on` to change the visibility of an element set to `display: flex;` it seems to override the existing display mode and set it to block which is undesired. Setting `show-on` to `display: inherit` seems to have fixed this for me but I don't feel confident enough in my CSS skills to just go and submit a PR for this issue!

Would appreciate it if somebody a little more knowledgeable wouldn't mind testing this ;P

Reproduce the issue with an element using `display: flex` and the `hide-on` or `show-on` behavior described in the report. Inspect how those SCSS utilities set display values; done means visibility changes no longer replace an element's existing non-block display mode.

Written by the indexing model from the issue text.