.liquid-toggle{--transition:0.2s;--ease:ease-out;--unchecked:hsl(218,8%,81%);--checked:hsl(var(--hue,209),calc((0 + (var(--complete, 0) / 100 * (100))) * 1%),calc((100 - (var(--complete, 0) / 100 * (50))) * 1%));--control:hsl(300,100%,100%);--border:5px;--width:140;--height:60;height:calc(var(--height) * 1px);width:calc(var(--width) * 1px);border-radius:100px;border:1px solid rgba(255,255,255,.4);padding:0;cursor:pointer;position:relative;overflow:visible;background:transparent;transition:outline var(--transition) var(--ease);outline-offset:2px;transform-style:preserve-3d;flex-shrink:0}.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 transparent}.indicator,.indicator--masked{border-radius:100px;pointer-events:none;height:100%;width:100%;background:var(--checked);position:absolute;top:50%;scale:1;left:50%;translate:-50% -50%;transition:background calc(var(--transition) * .5) ease-out}.knockout{height:calc(var(--height) * 1px);width:calc(var(--width) * 1px);border-radius:100px;filter:url(#remove-black);position:absolute;inset:0;will-change:filter,scale;transform:translateZ(0)}.indicator--masked{z-index:12;container-type:inline-size}.indicator--masked .mask{position:absolute;height:calc(100% - (2 * var(--border)));width:calc(60% - (2 * var(--border)));top:50%;background:#000;left:var(--border);border-radius:100px;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}.wrapper{clip-path:inset(0 0 0 0 round 100px);filter:blur(6px);transition:filter var(--transition) var(--ease)}.liquids,.wrapper{position:absolute;inset:0;border-radius:100px}.liquids{transform:translateZ(0);overflow:hidden;filter:url(#goo)}.liquids .liquid__shadow{position:absolute;inset:0;box-shadow:inset 0 0 3px 4px var(--checked),inset calc(((var(--complete, 0) / 100) * 8px) + -4px) 0 3px 4px var(--checked);border-radius:100px;transition:box-shadow calc(var(--transition) * .5) ease-out}.liquids .liquid__track{content:"";height:calc((var(--height) * 1px) - (0 * var(--border)));width:calc((var(--width) * 1px) - (0 * var(--border)));background:var(--checked);border-radius:100px;position:absolute;top:50%;left:0;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%}.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{position:absolute;height:calc(100% - (2 * var(--border)));width:calc(60% - (2 * var(--border)));top:50%;background:transparent;left:var(--border);border-radius:100px;translate:calc((var(--complete, 0) / 100) * (140px - 84px - (2 * var(--border)))) -50%;transition-property:scale;transition-duration:var(--transition);transition-timing-function:var(--ease)}.indicator__liquid .shadow{opacity:0;box-shadow:inset 1px -1px 2px hsl(0 0% 100%/.5),inset 0 -1px 2px hsl(0 0% 100%/.5),inset -1px -1px 2px hsl(0 0% 100%/.5),inset 1px 1px 2px hsl(0 0% 30%/.5),inset -8px 4px 10px -6px hsl(0 0% 30%/.25),inset -1px 1px 6px hsl(0 0% 30%/.25),-1px -1px 8px hsl(0 0% 60%/.15),1px 1px 2px hsl(0 0% 30%/.15),2px 2px 6px hsl(0 0% 30%/.15),inset -2px -1px 2px hsl(0 0% 100%/.25),3px 6px 16px -6px hsl(0 0% 30%/.5);z-index:20;transition:opacity var(--transition) var(--ease)}.indicator__liquid .cover,.indicator__liquid .shadow{content:"";position:absolute;inset:0;border-radius:100px}.indicator__liquid .cover{background:var(--checked);transition:opacity var(--transition) var(--ease),background var(--transition) var(--ease)}.liquid-toggle:active .indicator--masked .mask,.liquid-toggle[data-active=true] .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:active .indicator__liquid,.liquid-toggle[data-active=true] .indicator__liquid{scale:calc(1.65 + (var(--delta, 0) * .025)) calc(1.65 - (var(--delta, 0) * .025))}.liquid-toggle:active .wrapper,.liquid-toggle[data-active=true] .wrapper{filter:blur(0)}.liquid-toggle:active .indicator__liquid .shadow,.liquid-toggle[data-active=true] .indicator__liquid .shadow{opacity:1}.liquid-toggle:active .indicator__liquid .cover,.liquid-toggle[data-active=true] .indicator__liquid .cover{opacity:0}.liquid-toggle:active .indicator__liquid .liquid__track,.liquid-toggle[data-active=true] .indicator__liquid .liquid__track{left:calc(var(--border) * 3);height:calc((var(--height) * 1px) - (6 * var(--border)))}