スナックバーSnackbar

「スナックバー（Snackbar）」を実装してください。

## これは何か
画面の下に出る、操作ボタンを1つ持った通知。「削除しました／元に戻す」のように、やり直しの機会を渡す。

## 使いどころ
- 取り消せる操作の直後に、やり直す手段を渡したいとき
- 確認ダイアログを出す代わりに、先に実行してから戻せるようにしたいとき

## 実装の要件
- role="status" の要素に、本文 + 操作ボタンを1つ置く
- 表示時間は操作ボタンがあるぶん長めにする
- 自動で消えるなら、消えるまでの時間を長めに取る。ボタンを押す時間が要る
- 複数の操作ボタンを置かない。選ばせるならダイアログにする
- 画面下の固定ボタンと重なりやすい。位置を確かめる

## アクセシビリティの要件
- role="status" で伝える。ボタンがあるので、消える前に届く時間を確保する
- ボタンはキーボードでも到達できるようにする（トーストの中がタブ順に入るようにする）
- 消えるまでの残り時間を色だけで示さない

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<div class="x-snackbar" role="status">
  <span class="x-snackbar__t">1件を削除しました</span>
  <button class="x-snackbar__b" type="button">元に戻す</button>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-snackbar,
.x-snackbar *:not([class*="fa-"]),
.x-snackbar *:not([class*="fa-"])::before,
.x-snackbar *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-snackbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 258px;
  padding: 10px 10px 10px 15px;
  border-radius: 8px;
  background: #1b2028;
  color: #fff;
}
.x-snackbar__t {
  font-size: 12px;
}
.x-snackbar__b {
  padding: 6px 12px;
  border: 1px solid #4a5568;
  border-radius: 7px;
  background: none;
  color: #9dbcff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。