.liquid-toggle{--transition:.2s;--ease:ease-out;--unchecked:#cbced2;--checked:hsl(var(--hue,209), calc((0 + (var(--complete,0) / 100 * (100))) * 1%), calc((100 - (var(--complete,0) / 100 * (50))) * 1%));--control:#fff;--border:5px;--width:140;--height:60;height:calc(var(--height) * 1px);width:calc(var(--width) * 1px);cursor:pointer;transition:outline var(--transition) var(--ease);outline-offset:2px;transform-style:preserve-3d;background:0 0;border:1px solid #fff6;border-radius:100px;flex-shrink:0;padding:0;position:relative;overflow:visible}.liquid-toggle *{pointer-events:none}.liquid-toggle:focus-visible{outline:4px solid color-mix(in srgb, var(--checked), transparent 100%)}.liquid-toggle:active{outline:none}.liquid-toggle[data-active=true]:focus-visible{outline:4px solid #0000}.indicator,.indicator--masked{pointer-events:none;background:var(--checked);width:100%;height:100%;transition:background calc(var(--transition) * .5) ease-out;border-radius:100px;position:absolute;top:50%;left:50%;translate:-50% -50%;scale:1}.knockout{height:calc(var(--height) * 1px);width:calc(var(--width) * 1px);filter:url(#remove-black);will-change:filter, scale;border-radius:100px;position:absolute;inset:0;transform:translate(0,0)}.indicator--masked{z-index:12;container-type:inline-size}.indicator--masked .mask{height:calc(100% - (2 * var(--border)));width:calc(60% - (2 * var(--border)));top:50%;left:var(--border);translate:calc((var(--complete,0) / 100) * (140px - 84px - (0 * var(--border)))) -50%;transition-property:height,width,margin,scale;transition-duration:var(--transition);transition-timing-function:var(--ease);will-change:height, width, margin;background:#000;border-radius:100px;position:absolute}.wrapper{clip-path:inset(0 round 100px);filter:blur(6px);transition:filter var(--transition) var(--ease);border-radius:100px;position:absolute;inset:0}.liquids{filter:url(#goo);border-radius:100px;position:absolute;inset:0;overflow:hidden;transform:translate(0,0)}.liquids .liquid__shadow{box-shadow:inset 0px 0px 3px 4px var(--checked), inset calc(((var(--complete,0) / 100) * 8px) + -4px) 0px 3px 4px var(--checked);transition:box-shadow calc(var(--transition) * .5) ease-out;border-radius:100px;position:absolute;inset:0}.liquids .liquid__track{content:"";height:calc((var(--height) * 1px) - (0 * var(--border)));width:calc((var(--width) * 1px) - (0 * var(--border)));background:var(--checked);transition-property:height,width,filter,left,background;transition-duration:var(--transition), var(--transition), var(--transition), var(--transition), calc(var(--transition) * .5);transition-timing-function:var(--ease), var(--ease), var(--ease), var(--ease), ease-out;translate:calc((var(--complete,0) / 100) * (140px - 100% - (6 * var(--border)))) -50%;border-radius:100px;position:absolute;top:50%;left:0}.liquid-toggle[data-pressed=true] .liquid__track{min-height:30px}.liquid-toggle[aria-pressed=true]:not([data-active=true]) .liquid__track{left:calc(var(--border) * 6)}.indicator__liquid{height:calc(100% - (2 * var(--border)));width:calc(60% - (2 * var(--border)));top:50%;left:var(--border);translate:calc((var(--complete,0) / 100) * (140px - 84px - (2 * var(--border)))) -50%;transition-property:scale;transition-duration:var(--transition);transition-timing-function:var(--ease);background:0 0;border-radius:100px;position:absolute}.indicator__liquid .shadow{opacity:0;content:"";z-index:20;transition:opacity var(--transition) var(--ease);border-radius:100px;position:absolute;inset:0;box-shadow:inset 1px -1px 2px #ffffff80,inset 0 -1px 2px #ffffff80,inset -1px -1px 2px #ffffff80,inset 1px 1px 2px #4d4d4d80,inset -8px 4px 10px -6px #4d4d4d40,inset -1px 1px 6px #4d4d4d40,-1px -1px 8px #99999926,1px 1px 2px #4d4d4d26,2px 2px 6px #4d4d4d26,inset -2px -1px 2px #ffffff40,3px 6px 16px -6px #4d4d4d80}.indicator__liquid .cover{content:"";background:var(--checked);transition:opacity var(--transition) var(--ease), background var(--transition) var(--ease);border-radius:100px;position:absolute;inset:0}.liquid-toggle[data-active=true] .indicator--masked .mask,.liquid-toggle:active .indicator--masked .mask{height:calc((100% - (2 * var(--border))) * (1.65 - (var(--delta,0) * .025)));width:calc((60% - (2 * var(--border))) * (1.65 + (var(--delta,0) * .025)));margin-left:calc((60% - (2 * var(--border))) * ((.65 + (var(--delta,0) * .025)) * -.5))}.liquid-toggle[data-active=true] .indicator__liquid,.liquid-toggle:active .indicator__liquid{scale:calc(1.65 + (var(--delta,0) * .025)) calc(1.65 - (var(--delta,0) * .025))}.liquid-toggle[data-active=true] .wrapper,.liquid-toggle:active .wrapper{filter:blur()}.liquid-toggle[data-active=true] .indicator__liquid .shadow,.liquid-toggle:active .indicator__liquid .shadow{opacity:1}.liquid-toggle[data-active=true] .indicator__liquid .cover,.liquid-toggle:active .indicator__liquid .cover{opacity:0}.liquid-toggle[data-active=true] .indicator__liquid .liquid__track,.liquid-toggle:active .indicator__liquid .liquid__track{left:calc(var(--border) * 3);height:calc((var(--height) * 1px) - (6 * var(--border)))}