Subtitle Track Menu

<!-- Subtitle Track Menu — native <details>/<summary> track list -->
<details class="nuda-vp2-subtitles">
  <summary class="nuda-vp2-subtitles__btn" aria-label="Subtitles, currently English">
    <span class="nuda-vp2-subtitles__badge">CC</span>
  </summary>
  <ul class="nuda-vp2-subtitles__menu">
    <li><button class="nuda-vp2-subtitles__opt" type="button">Off</button></li>
    <li><button class="nuda-vp2-subtitles__opt is-active" type="button" aria-current="true">English</button></li>
    <li><button class="nuda-vp2-subtitles__opt" type="button">Español</button></li>
    <li><button class="nuda-vp2-subtitles__opt" type="button">Français</button></li>
    <li><button class="nuda-vp2-subtitles__opt" type="button">日本語</button></li>
  </ul>
</details>

.nuda-vp2-subtitles {
  position: relative;
  width: 70px;
  font: 600 10px ui-sans-serif,system-ui,sans-serif;
}

.nuda-vp2-subtitles__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 26px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: #fafafa;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.nuda-vp2-subtitles__btn::marker {
  content: "";
}

.nuda-vp2-subtitles__btn::-webkit-details-marker {
  display: none;
}

.nuda-vp2-subtitles__btn:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

.nuda-vp2-subtitles__badge {
  font: 800 9px ui-sans-serif,system-ui,sans-serif;
  letter-spacing: .04em;
}

.nuda-vp2-subtitles[open] .nuda-vp2-subtitles__btn {
  color: #e4ff54;
  border-color: rgba(228,255,84,.4);
}

.nuda-vp2-subtitles__menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: 110px;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
  transform-origin: top;
  animation: _nuda-vp2subtitlespop .18s ease both;
}

.nuda-vp2-subtitles__opt {
  display: block;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: #cfcfcf;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease,color .15s ease;
}

.nuda-vp2-subtitles__opt:hover {
  background: rgba(255,255,255,.06);
  color: #fafafa;
}

.nuda-vp2-subtitles__opt:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: -2px;
}

.nuda-vp2-subtitles__opt.is-active {
  color: #e4ff54;
}

.nuda-vp2-subtitles__opt.is-active::after {
  content: " ✓";
}

@keyframes _nuda-vp2subtitlespop {
  from {
    opacity: 0;
    transform: scaleY(.85);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-vp2-subtitles__menu {
    animation: none;
  }
  .nuda-vp2-subtitles__opt {
    transition: none;
  }
}