Glass Toggle

<button class="nuda-glass-toggle" role="switch" aria-checked="true" aria-label="Frosted toggle">
  <span class="nuda-glass-toggle__thumb" aria-hidden="true"></span>
</button>

/* Glass Toggle
   Frosted switch with a glowing lime thumb when on.
   Customize: --glass-toggle-accent */

.nuda-glass-toggle {
  --glass-toggle-accent: #e4ff54;
  position: relative;
  width: 64px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.nuda-glass-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(228, 255, 84, 0.5);
}

.nuda-glass-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.nuda-glass-toggle[aria-checked="true"] {
  background: rgba(228, 255, 84, 0.18);
}

.nuda-glass-toggle[aria-checked="true"] .nuda-glass-toggle__thumb {
  transform: translateX(30px);
  background: var(--glass-toggle-accent);
  box-shadow: 0 0 14px rgba(228, 255, 84, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .nuda-glass-toggle,
  .nuda-glass-toggle__thumb { transition: none; }
}

/* Glass Toggle — vanilla JS
   Toggles aria-checked on the switch. */

(function () {
  document.querySelectorAll(".nuda-glass-toggle").forEach(function (sw) {
    sw.addEventListener("click", function () {
      var on = sw.getAttribute("aria-checked") === "true";
      sw.setAttribute("aria-checked", String(!on));
    });
  });
})();