Traveling Highlight Row

<!-- Traveling Highlight Row — the selection bar glides between rows via translateY -->
<div class="nuda-cp2-travel-highlight" role="dialog" aria-label="Command palette">
  <div class="nuda-cp2-travel-highlight__listwrap">
    <span class="nuda-cp2-travel-highlight__glow" aria-hidden="true"></span>
    <ul class="nuda-cp2-travel-highlight__list" role="listbox" aria-label="Commands">
      <li class="nuda-cp2-travel-highlight__opt" role="option" aria-selected="false">
        <span class="nuda-cp2-travel-highlight__label">New Tab</span>
        <span class="nuda-cp2-travel-highlight__kbd"><kbd>⌘</kbd><kbd>T</kbd></span>
      </li>
      <li class="nuda-cp2-travel-highlight__opt nuda-cp2-travel-highlight__opt--active" role="option" aria-selected="true">
        <span class="nuda-cp2-travel-highlight__label">Close Tab</span>
        <span class="nuda-cp2-travel-highlight__kbd"><kbd>⌘</kbd><kbd>W</kbd></span>
      </li>
      <li class="nuda-cp2-travel-highlight__opt" role="option" aria-selected="false">
        <span class="nuda-cp2-travel-highlight__label">Reopen Tab</span>
        <span class="nuda-cp2-travel-highlight__kbd"><kbd>⇧</kbd><kbd>⌘</kbd><kbd>T</kbd></span>
      </li>
    </ul>
  </div>
</div>

.nuda-cp2-travel-highlight {
  width: 290px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 16px 40px -8px rgba(0,0,0,.6);
}

.nuda-cp2-travel-highlight__listwrap {
  position: relative;
}

.nuda-cp2-travel-highlight__glow {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34px;
  border-radius: 6px;
  background: rgba(228,255,84,.1);
  border: 1px solid rgba(228,255,84,.25);
  z-index: 0;
  animation: nuda-cp2-travel-highlight-move 3.6s ease-in-out infinite;
}

.nuda-cp2-travel-highlight__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.nuda-cp2-travel-highlight__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 8px;
  font: 500 12px ui-sans-serif,system-ui;
  color: #cfcfcf;
  box-sizing: border-box;
}

.nuda-cp2-travel-highlight__opt--active .nuda-cp2-travel-highlight__label {
  color: #e4ff54;
}

.nuda-cp2-travel-highlight__kbd {
  display: inline-flex;
  gap: 2px;
}

.nuda-cp2-travel-highlight__kbd kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  font: 700 9px ui-monospace,monospace;
  color: #a1a1aa;
  line-height: 1;
}

@keyframes nuda-cp2-travel-highlight-move {
  0%,20% {
    transform: translateY(0);
  }
  40%,60% {
    transform: translateY(34px);
  }
  80%,100% {
    transform: translateY(68px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cp2-travel-highlight__glow {
    animation: none !important;
    transform: translateY(34px);
  }
}