/*
===
2.5 Screen Reader
===

### Screen Reader Class

読み上げ用テキストに適用します。

```html
<a class="h-sr" href="#main">本文にスキップ</a>
```

#### Display Modifier

要素がフォーカスされたとき、画面に表示されるようにします。

```html
<a class="h-sr h-sr--ds" href="#main">本文にスキップ</a>
```

*/

.h-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

.h-sr--ds {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    clip-path: none;
  }
}