Apple Liquid Glass Toggle

<!-- SVG Filter for Glass Distortion -->
<svg style="display: none">
  <filter id="glass-distortion">
    <feTurbulence type="turbulence" baseFrequency="0.008" numOctaves="2" result="noise" />
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="77" />
  </filter>
</svg>

<div class="glass-toggle-group">
  <!-- Toggle 1 -->
  <label class="glass-toggle">
    <input type="checkbox" class="toggle-input">
    <div class="toggle-track">
      <div class="glass-filter"></div>
      <div class="glass-overlay"></div>
      <div class="glass-specular"></div>
      <div class="toggle-thumb">
        <div class="glass-filter"></div>
        <div class="glass-overlay"></div>
        <div class="glass-specular"></div>
      </div>
    </div>
    <span class="toggle-label">Dark Mode</span>
  </label>

  <!-- Toggle 2 -->
  <label class="glass-toggle">
    <input type="checkbox" class="toggle-input" checked>
    <div class="toggle-track">
      <div class="glass-filter"></div>
      <div class="glass-overlay"></div>
      <div class="glass-specular"></div>
      <div class="toggle-thumb">
        <div class="glass-filter"></div>
        <div class="glass-overlay"></div>
        <div class="glass-specular"></div>
      </div>
    </div>
    <span class="toggle-label">Notifications</span>
  </label>

  <!-- Toggle 3 -->
  <label class="glass-toggle">
    <input type="checkbox" class="toggle-input">
    <div class="toggle-track">
      <div class="glass-filter"></div>
      <div class="glass-overlay"></div>
      <div class="glass-specular"></div>
      <div class="toggle-thumb">
        <div class="glass-filter"></div>
        <div class="glass-overlay"></div>
        <div class="glass-specular"></div>
      </div>
    </div>
    <span class="toggle-label">Auto Update</span>
  </label>
</div>

/* Glass Toggle Group */
.glass-toggle-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 200px;
}

/* Glass Toggle Container */
.glass-toggle {
  --bg-color: rgba(255, 255, 255, 0.25);
  --highlight: rgba(255, 255, 255, 0.75);
  --text: #ffffff;
  --track-width: 60px;
  --track-height: 32px;
  --thumb-size: 24px;
  
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

/* Hide checkbox but keep it accessible */
.toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Toggle Track */
.toggle-track {
  position: relative;
  width: var(--track-width);
  height: var(--track-height);
  border-radius: 16px;
  overflow: hidden;
}

.glass-filter,
.glass-overlay,
.glass-specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.glass-filter {
  z-index: 1;
  backdrop-filter: blur(4px);
  filter: url(#glass-distortion) saturate(120%) brightness(1.15);
}

.glass-overlay {
  z-index: 2;
  background: var(--bg-color);
}

.glass-specular {
  z-index: 3;
  box-shadow: inset 1px 1px 1px var(--highlight);
}

/* Toggle Thumb */
.toggle-thumb {
  position: absolute;
  z-index: 4;
  top: 4px;
  left: 4px;
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  transition: transform 0.3s ease;
  overflow: hidden;
}

.toggle-thumb .glass-overlay {
  background: rgba(255, 255, 255, 0.9);
}

/* Toggle Label */
.toggle-label {
  color: var(--text);
  font-size: 16px;
  user-select: none;
}

/* Checked State */
.toggle-input:checked + .toggle-track .toggle-thumb {
  transform: translateX(calc(var(--track-width) - var(--thumb-size) - 8px));
}

.toggle-input:checked + .toggle-track .glass-overlay {
  background: rgba(255, 255, 255, 0.4);
}

/* Focus State */
.toggle-input:focus-visible + .toggle-track {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Hover State */
.glass-toggle:hover .toggle-track .glass-overlay {
  background: rgba(255, 255, 255, 0.35);
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  .glass-toggle {
    --bg-color: rgba(0, 0, 0, 0.25);
    --highlight: rgba(255, 255, 255, 0.15);
  }
  
  .toggle-thumb .glass-overlay {
    background: rgba(255, 255, 255, 0.8);
  }
}