Play to Pause

<button class="nuda-icon-playpause" type="button" aria-label="Play" aria-pressed="false">
  <svg class="nuda-icon-playpause__svg" viewBox="0 0 24 24" aria-hidden="true">
    <rect class="nuda-icon-playpause__l" x="6"  y="5" width="5" height="14" rx="1.2" />
    <rect class="nuda-icon-playpause__r" x="13" y="5" width="5" height="14" rx="1.2" />
  </svg>
</button>

/* Play to Pause
   Two bars: collapsed (play wedge) → split apart (pause). Lime when playing.
   GPU-only: transform + opacity. Customize: --icon-accent */

.nuda-icon-playpause {
  --icon-accent: #e4ff54;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #09090b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #fafafa;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}

.nuda-icon-playpause:hover,
.nuda-icon-playpause:focus-visible {
  border-color: rgba(228, 255, 84, 0.4);
  outline: none;
}

.nuda-icon-playpause:focus-visible {
  box-shadow: 0 0 0 2px rgba(228, 255, 84, 0.5);
}

.nuda-icon-playpause[aria-pressed="true"] { color: var(--icon-accent); }

.nuda-icon-playpause__svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.nuda-icon-playpause__svg rect {
  transition: transform 0.35s cubic-bezier(0.4, 0.2, 0.2, 1), opacity 0.25s;
  transform-origin: center;
  will-change: transform, opacity;
}

/* Paused/idle = play look: one slim wedge, second bar hidden */
.nuda-icon-playpause__l { transform: translateX(2px) scaleX(0.55); }
.nuda-icon-playpause__r { opacity: 0; transform: translateX(-4px) scaleX(0.2); }

/* Playing = pause look: two full bars */
.nuda-icon-playpause[aria-pressed="true"] .nuda-icon-playpause__l {
  transform: translateX(0) scaleX(1);
}
.nuda-icon-playpause[aria-pressed="true"] .nuda-icon-playpause__r {
  opacity: 1;
  transform: translateX(0) scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .nuda-icon-playpause__svg rect { transition: none; }
}

/* Play to Pause — vanilla JS
   Flips aria-pressed and keeps the label in sync. */

(function () {
  document.querySelectorAll(".nuda-icon-playpause").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var playing = btn.getAttribute("aria-pressed") !== "true";
      btn.setAttribute("aria-pressed", String(playing));
      btn.setAttribute("aria-label", playing ? "Pause" : "Play");
    });
  });
})();