/* Slide-to-confirm (port of React Bits SlideCommit, MIT), KNOT flavour */
.slide-commit{--sc-h:52px;--sc-track:#161616;--sc-ink:#ffffff;--sc-ok:#8ef0a1;--sc-no:#ff7b7b;--sc-on:#0a0b0d;position:relative;display:block;width:100%;height:var(--sc-h);font-family:inherit}
.slide-commit[data-disabled]{opacity:.5;pointer-events:none}
.slide-commit__track{position:relative;width:100%;height:100%;border-radius:999px;background:var(--sc-track);border:1px solid rgba(255,255,255,.16);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.slide-commit__track.shake{animation:sc-shake .45s ease}
@keyframes sc-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.slide-commit__label{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;z-index:2}
.slide-commit__text{grid-area:1/1;color:rgba(255,255,255,.55);transition:opacity .2s ease,filter .2s ease;white-space:nowrap}
.slide-commit__text--error{color:var(--sc-no);opacity:0;filter:blur(2px)}
.slide-commit[data-phase='error'] .slide-commit__text--plain{opacity:0!important;filter:blur(2px)}
.slide-commit[data-phase='error'] .slide-commit__text--error{opacity:1;filter:none}
.slide-commit[data-phase='pending'] .slide-commit__text--plain,.slide-commit[data-phase='done'] .slide-commit__text--plain{opacity:0!important}
.slide-commit__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.08);border-radius:999px;pointer-events:none;z-index:1}
.slide-commit__grip{position:absolute;top:4px;left:4px;height:calc(100% - 8px);aspect-ratio:1;border-radius:999px;background:linear-gradient(180deg,#ffffff,#e6e8ee);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 8px rgba(0,0,0,.4);color:var(--sc-on);display:grid;place-items:center;cursor:grab;z-index:3;outline:none;transition:background-color .2s ease,color .2s ease;will-change:transform}
.slide-commit[data-held] .slide-commit__grip{cursor:grabbing;transform-origin:left center}
.slide-commit[data-phase='pending'] .slide-commit__grip{cursor:default}
.slide-commit[data-phase='done'] .slide-commit__grip{background:var(--sc-ok)}
.slide-commit[data-phase='error'] .slide-commit__grip{background:var(--sc-no);color:#fff}
.slide-commit__grip:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #0a0b0d}
.slide-commit__arrow,.slide-commit__spin,.slide-commit__done{grid-area:1/1;display:grid;place-items:center;transition:opacity .15s ease}
.slide-commit__spin,.slide-commit__done{opacity:0}
.slide-commit__spin svg{animation:sc-spin .9s linear infinite}
@keyframes sc-spin{to{transform:rotate(360deg)}}
.slide-commit[data-phase='pending'] .slide-commit__arrow,.slide-commit[data-phase='done'] .slide-commit__arrow,.slide-commit[data-phase='error'] .slide-commit__arrow{opacity:0}
.slide-commit[data-phase='pending'] .slide-commit__spin{opacity:1}
.slide-commit[data-phase='done'] .slide-commit__done{opacity:1}