Sprout

const css = `
  .toggle-sprout { position: relative; display: inline-flex; align-items: center; gap: 12px; color: light-dark(#42454c, #e5e6e9); font-size: 14px; cursor: pointer; user-select: none; }
  .toggle-sprout__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
  .toggle-sprout__track { position: relative; width: 44px; height: 52px; border-radius: 8px; }
  .toggle-sprout__input:focus-visible + .toggle-sprout__track { outline: 2px solid light-dark(#5f626a, #a7abb2); outline-offset: 3px; }
  .toggle-sprout__soil {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 0;
    height: 10px;
    border-radius: 3px 3px 6px 6px;
    background: radial-gradient(light-dark(#cbced3, #393c41) 0.8px, transparent 1.2px) 0 0 / 5px 4px, light-dark(#ebedf0, #232529);
    box-shadow: inset 0 1px 0 light-dark(#cbced3, #393c41);
  }
  .toggle-sprout__seed { position: absolute; left: 18px; bottom: 8px; width: 8px; height: 5px; border-radius: 50%; background: light-dark(#6d7179, #7d8087); }
  .toggle-sprout__stem {
    position: absolute;
    left: 21px;
    bottom: 10px;
    width: 2px;
    height: 30px;
    border-radius: 1px;
    background: light-dark(#50535b, #c6c8cd);
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 0.35s ease-in 0.2s;
  }
  .toggle-sprout__leaf {
    position: absolute;
    bottom: 26px;
    width: 13px;
    height: 7px;
    background: light-dark(#42454c, #e5e6e9);
    transform: scale(0) rotate(30deg);
    transition: transform 0.3s ease-in;
  }
  .toggle-sprout__leaf--l { left: 9px; border-radius: 100% 0 100% 0; transform-origin: 100% 100%; }
  .toggle-sprout__leaf--r { left: 22px; bottom: 32px; border-radius: 0 100% 0 100%; transform-origin: 0 100%; transform: scale(0) rotate(-30deg); }
  .toggle-sprout__bud { position: absolute; left: 19px; bottom: 38px; width: 6px; height: 6px; border-radius: 50%; background: light-dark(#373a40, #f1f2f3); transform: scale(0); transition: transform 0.2s ease-in; }
  .toggle-sprout__input:checked + .toggle-sprout__track .toggle-sprout__stem { transform: scaleY(1); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1); }
  .toggle-sprout__input:checked + .toggle-sprout__track .toggle-sprout__leaf { transform: scale(1) rotate(0deg); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s; }
  .toggle-sprout__input:checked + .toggle-sprout__track .toggle-sprout__leaf--r { transition-delay: 0.42s; }
  .toggle-sprout__input:checked + .toggle-sprout__track .toggle-sprout__bud { transform: scale(1); transition: transform 0.4s cubic-bezier(0.34, 1.8, 0.64, 1) 0.6s; }
  @media (prefers-reduced-motion: reduce) {
    .toggle-sprout__track * { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  }
`;

export function SproutToggle() {
  return (
    <>
      <style>
        {css}
      </style>
      <label className="toggle-sprout">
        <input className="toggle-sprout__input" type="checkbox" role="switch" />
        <span className="toggle-sprout__track" aria-hidden="true">
          <span className="toggle-sprout__stem" />
          <span className="toggle-sprout__leaf toggle-sprout__leaf--l" />
          <span className="toggle-sprout__leaf toggle-sprout__leaf--r" />
          <span className="toggle-sprout__bud" />
          <span className="toggle-sprout__seed" />
          <span className="toggle-sprout__soil" />
        </span>
        Eco mode
      </label>
    </>
  );
}