.foot-motion { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 2px 0; font-size: inherit; color: rgba(255,255,255,.55); transition: color .2s; }
.foot-motion:hover { color: #fff; }
.foot-motion::before { content: ''; width: 8px; height: 8px; border-radius: 999px; border: 1.5px solid currentColor; }
.foot-motion::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 24px; }
.foot-motion[aria-pressed="true"] { color: #5be0a0; }
.foot-motion[aria-pressed="true"]::before { background: #5be0a0; border-color: #5be0a0; }
html:not(.js) .foot-motion { display: none; }