CSSだけで滑らかにスライドするタイプのタブ的なものを実装する

こういう感じのやつです。
最初はタブ的なものを作ろうとしてたのですが、なんかスイッチみたいになっちゃいました。応用効きます。

JavaScript を使って実装もありですが、考えるだけで頭痛がしそうです。なので今回はCSSだけで実装してみたいと思います。
ただCSSで作る性質上制限があります。項目数（タブの数）は2つしか作れません。

コード

ラジオボタンを活用することで、JSを使わずにどちらか一方しか選択できないようにしています。
ラジオボタン自体は、アクセシビリティの観点からdisplay: none;ではなくappearance: none;で非表示にしています。

そして、肝心の切り替わりアニメーションは、一見青いボックスが中で動ているよう見えますが、insetのbox-shadowを左右から伸び縮みさせることでその様に見せています。
「オプション2」が選択されたら、「オプション1」のbox-shadowは右側へ縮んでいき、「オプション2」のbox-shadowは左から伸びてくるという感じです。

このコードの大部分は装飾用なので、最低横並べ用のdisplay: inline-block;とbox-shadowさえあれば動くというシンプルさです。

---

うまく作れば下線だけ動かすとかもできそう…
(2024-7-14追記) 作りました👇