/* ==========================================================================
   061 — Liquid Toggle
   Toggle CSS-only : le pouce est composé de trois cercles (tête, corps,
   gouttelette) aux easings décalés — fusionnés par un filtre goo SVG, ils
   forment une goutte qui s'étire pendant la bascule. Checkbox caché :checked.
   ========================================================================== */

.liquid-toggle {
  --lt-width: 60px;
  --lt-height: 32px;
  --lt-pad: 4px;
  --lt-thumb: 24px;
  --lt-goo-pad: 10px; /* marge du calque goo pour ne pas rogner le blur */
  --lt-travel: calc(var(--lt-width) - var(--lt-thumb) - var(--lt-pad) * 2);
  --lt-on: var(--ml-accent, #7c8cff);

  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  color: var(--ml-fg, #e8eaf2);
  font-size: 0.95rem;
  user-select: none;
  -webkit-user-select: none;
}

/* input masqué mais focusable (accessibilité clavier) */
.liquid-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --- Piste ---------------------------------------------------------------- */

.liquid-toggle__track {
  position: relative;
  flex: none;
  width: var(--lt-width);
  height: var(--lt-height);
  border-radius: calc(var(--lt-height) / 2);
  background: color-mix(in srgb, var(--ml-muted, #8b91a3) 24%, var(--ml-bg, #0d1017));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: background-color 0.45s ease, box-shadow 0.45s ease;
}

.liquid-toggle:hover .liquid-toggle__track {
  background: color-mix(in srgb, var(--ml-muted, #8b91a3) 34%, var(--ml-bg, #0d1017));
}

.liquid-toggle__input:checked + .liquid-toggle__track {
  background: color-mix(in srgb, var(--lt-on) 40%, var(--ml-bg, #0d1017));
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.35),
    0 0 16px -2px color-mix(in srgb, var(--lt-on) 60%, transparent);
}

.liquid-toggle__input:focus-visible + .liquid-toggle__track {
  outline: 2px solid var(--lt-on);
  outline-offset: 3px;
}

/* --- Pouce liquide (calque goo) -------------------------------------------- */

.liquid-toggle__goo {
  position: absolute;
  inset: calc(var(--lt-goo-pad) * -1);
  filter: url(#liquid-toggle-goo);
  pointer-events: none;
}

.liquid-toggle__thumb,
.liquid-toggle__trail,
.liquid-toggle__drip {
  position: absolute;
  top: calc(var(--lt-goo-pad) + var(--lt-pad));
  left: calc(var(--lt-goo-pad) + var(--lt-pad));
  width: var(--lt-thumb);
  height: var(--lt-thumb);
  border-radius: 50%;
  background: var(--ml-fg, #e8eaf2);
}

/* tête : part vite, léger overshoot élastique, se pose */
.liquid-toggle__thumb {
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}

/* corps : suit avec un temps de retard → c'est lui qui crée l'étirement */
.liquid-toggle__trail {
  transition: transform 0.55s cubic-bezier(0.65, 0.05, 0.35, 1) 0.05s;
}

/* gouttelette : traîne encore plus, dessine le fil de liquide qui se rompt */
.liquid-toggle__drip {
  width: calc(var(--lt-thumb) * 0.45);
  height: calc(var(--lt-thumb) * 0.45);
  top: calc(var(--lt-goo-pad) + var(--lt-pad) + var(--lt-thumb) * 0.275);
  left: calc(var(--lt-goo-pad) + var(--lt-pad) + var(--lt-thumb) * 0.275);
  transition: transform 0.62s cubic-bezier(0.7, 0, 0.3, 1) 0.09s;
}

.liquid-toggle__input:checked + .liquid-toggle__track .liquid-toggle__thumb,
.liquid-toggle__input:checked + .liquid-toggle__track .liquid-toggle__trail,
.liquid-toggle__input:checked + .liquid-toggle__track .liquid-toggle__drip {
  transform: translateX(var(--lt-travel));
}

/* --- Libellé ---------------------------------------------------------------- */

.liquid-toggle__text {
  line-height: 1.3;
}

/* --- Wrapper de démo (galerie) ---------------------------------------------- */

.liquid-toggle-demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.liquid-toggle-demo__defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* --- Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .liquid-toggle__thumb,
  .liquid-toggle__trail,
  .liquid-toggle__drip {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }

  .liquid-toggle__track {
    transition-duration: 0.01s;
  }
}