/*
@styleguide
@title Visibility

Set the `visibility` property to the following values:
- `hidden`
- `visible`

Note that hidden elements still affect layouts. They are also hidden from
screen readers.

Hide elements visually while ensuring they're accessible by screen readers  with
the `visually-hidden` class, also available with the alias `.sr-only`.

<div class="visually-hidden">Can't see me, but screen readers can!</div>

```html
<div class="visually-hidden">Can't see me, but screen readers can!</div>
```
*/

.visibility--hidden { visibility: hidden; }
.visibility--visible { visibility: visible; }

.sr-only:where(:not(.particle-exclude, .particle-exclude *)),
.visually-hidden:where(:not(.particle-exclude, .particle-exclude *)) {
  border: 0;
  clip: rect(0,0,0,0);
  height: 1px;
  left: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
  width: 1px;
}