Buckle

import { useState } from 'react';

const css = `
  @keyframes cb-buckle-jolt { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(2px); } 70% { transform: translateX(-0.5px); } }
  @keyframes cb-buckle-press { 0%, 100% { transform: translateY(0); } 30%, 50% { transform: translateY(1.5px); } }
  @keyframes cb-buckle-out { 0% { transform: translateX(16px); } 55% { transform: translateX(-4px); } 80% { transform: translateX(1px); } 100% { transform: translateX(0); } }
  .cb-buckle { display: inline-flex; align-items: center; gap: 14px; color: light-dark(#42454c, #e5e6e9); font-size: 15px; cursor: pointer; user-select: none; }
  .cb-buckle__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
  .cb-buckle__art { display: block; width: 124px; height: 48px; overflow: visible; border-radius: 8px; }
  .cb-buckle__input:focus-visible + .cb-buckle__art { outline: 2px solid light-dark(#5f626a, #a7abb2); outline-offset: 4px; }
  .cb-buckle__webbing { fill: light-dark(#cbced3, #393c41); }
  .cb-buckle__stitch { fill: none; stroke: light-dark(#6d7179, #7d8087); stroke-width: 0.8; stroke-dasharray: 2 1.6; }
  .cb-buckle__tongue { fill: light-dark(#50535b, #c6c8cd); }
  .cb-buckle__slot { fill: light-dark(#cbced3, #393c41); }
  .cb-buckle__case { fill: light-dark(#6d7179, #7d8087); }
  .cb-buckle__mouth { fill: light-dark(#f3f4f7, #1a1c1f); }
  .cb-buckle__button { fill: light-dark(#dbdde1, #2e3035); }
  .cb-buckle__tick { fill: none; stroke: light-dark(#373a40, #f1f2f3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.2s; }
  /* In: the tongue slides home and the housing takes the knock. Out: the button goes down and the spring throws it back. */
  .cb-buckle__belt { transition: transform 0.35s cubic-bezier(0.5, 0, 0.9, 0.6); }
  .cb-buckle__input:checked + .cb-buckle__art .cb-buckle__belt { transform: translateX(16px); }
  .cb-buckle__input:checked + .cb-buckle__art .cb-buckle__tick { stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s ease-out 0.4s; }
  .cb-buckle[data-armed] .cb-buckle__input:checked + .cb-buckle__art .cb-buckle__housing { animation: cb-buckle-jolt 0.25s ease-out 0.33s; }
  .cb-buckle[data-armed] .cb-buckle__input:not(:checked) + .cb-buckle__art .cb-buckle__button { animation: cb-buckle-press 0.3s ease-in-out; }
  .cb-buckle[data-armed] .cb-buckle__input:not(:checked) + .cb-buckle__art .cb-buckle__belt { animation: cb-buckle-out 0.6s ease-out 0.1s backwards; }
  @media (prefers-reduced-motion: reduce) {
    .cb-buckle__belt, .cb-buckle__tick, .cb-buckle__input:checked + .cb-buckle__art .cb-buckle__tick { transition: none; }
    .cb-buckle[data-armed] .cb-buckle__input:checked + .cb-buckle__art .cb-buckle__housing,
    .cb-buckle[data-armed] .cb-buckle__input:not(:checked) + .cb-buckle__art .cb-buckle__button,
    .cb-buckle[data-armed] .cb-buckle__input:not(:checked) + .cb-buckle__art .cb-buckle__belt { animation: none; }
  }
`;

export function BuckleCheckbox() {
  // The click and the release only play once it has been used, never on load.
  const [armed, setArmed] = useState(false);
  return (
    <>
      <style>
        {css}
      </style>
      <label className="cb-buckle" data-armed={armed || undefined}>
        <input className="cb-buckle__input" type="checkbox" onChange={() => setArmed(true)} />
        <svg className="cb-buckle__art" viewBox="0 0 124 48" aria-hidden="true">
          <rect className="cb-buckle__webbing" x="108" y="19" width="16" height="10" />
          <g className="cb-buckle__belt">
            <rect className="cb-buckle__webbing" x="-4" y="19" width="42" height="10" />
            <path className="cb-buckle__stitch" d="M-2 21H36M-2 27H36" />
            <path className="cb-buckle__tongue" d="M36 16H54Q58 16 60 19L68 21V27L60 29Q58 32 54 32H36Z" />
            <rect className="cb-buckle__slot" x="40" y="21" width="10" height="6" rx="2" />
          </g>
          <g className="cb-buckle__housing">
            <rect className="cb-buckle__case" x="70" y="11" width="40" height="26" rx="6" />
            <rect className="cb-buckle__mouth" x="70" y="19" width="5" height="10" rx="1.5" />
            <rect className="cb-buckle__button" x="82" y="15" width="22" height="18" rx="4" />
            <path className="cb-buckle__tick" pathLength={1} d="M87 24L91 28L99 20" />
          </g>
        </svg>
        <span>Buckle up</span>
      </label>
    </>
  );
}