@layer vitamin-play{.vp-toggle{--toggle-rtl-direction:1}[dir=rtl] .vp-toggle{--toggle-rtl-direction:-1}.vp-toggle{--toggle-transition:var(--vp-semantic-motion-duration-quick) var(--vp-semantic-motion-easing-expressive-ease-in-out);--toggle-disabled-opacity:var(--vp-semantic-opacity-s);--touch-height:var(--vp-semantic-sizing-accessibility-touch-size);--track-background:var(--vp-semantic-color-container-quiet);--track-border-radius:var(--vp-semantic-border-radius-full);--toggle-border-width:var(--vp-semantic-border-width-s);--track-border:var(--toggle-border-width) solid var(--vp-semantic-color-border-neutral);--track-width:var(--vp-semantic-sizing-5xl);--track-height:var(--vp-semantic-sizing-2xl);--container-spacing-block-start:var(--vp-semantic-spacing-xs);--container-spacing-block-end:var(--vp-semantic-spacing-xs);--container-spacing-inline-start:var(--vp-semantic-spacing-xs);--container-spacing-inline-end:var(--vp-semantic-spacing-xs);--checked-icon:url("data:image/svg+xml;utf8,<svg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M3.48861 9.66681L8.2225 14.4007L16.5367 6.08646' stroke='black' stroke-width='2'/></svg>");--checked-ball-mask:var(--checked-icon) no-repeat 50% 50%,linear-gradient(#fff,#fff);--checked-icon-width:var(--vp-semantic-sizing-xl);--checked-icon-height:var(--vp-semantic-sizing-xl);--checked-icon-size:var(--checked-icon-width) var(--checked-icon-height);--handle-background:var(--vp-semantic-color-content-quiet);--handle-width:var(--vp-semantic-sizing-m);--handle-height:var(--vp-semantic-sizing-m);--halo-width:var(--vp-semantic-sizing-3xl);--halo-height:var(--vp-semantic-sizing-3xl);--halo-color:transparent;--halo-color-checked-active:var(--vp-semantic-color-alpha-brand-m);--halo-color-checked-hover:var(--vp-semantic-color-alpha-brand-s);--halo-color-unchecked-active:var(--vp-semantic-color-alpha-quiet-m);--halo-color-unchecked-hover:var(--vp-semantic-color-alpha-quiet-s);--halo-offset:calc(var(--halo-width)/2 - var(--handle-width)/2 - var(--container-spacing-inline-start))}.vp-toggle[data-checked]{--track-background:var(--vp-semantic-color-container-brand);--handle-background:var(--vp-semantic-color-content-on-brand-neutral);--toggle-border-width:var(--vp-semantic-border-width-none);--track-border:var(--toggle-border-width) solid transparent;--handle-width:var(--vp-semantic-sizing-xl);--handle-height:var(--vp-semantic-sizing-xl);--container-spacing-block-start:var(--vp-semantic-spacing-2xs);--container-spacing-block-end:var(--vp-semantic-spacing-2xs);--container-spacing-inline-start:var(--vp-semantic-spacing-2xs);--container-spacing-inline-end:var(--vp-semantic-spacing-2xs)}.vp-toggle--small{--track-width:var(--vp-semantic-sizing-3xl);--track-height:var(--vp-semantic-sizing-xl);--checked-icon-width:var(--vp-semantic-sizing-m);--checked-icon-height:var(--vp-semantic-sizing-m);--handle-width:var(--vp-semantic-sizing-m);--handle-height:var(--vp-semantic-sizing-m);--container-spacing-block-start:var(--vp-semantic-spacing-2xs);--container-spacing-block-end:var(--vp-semantic-spacing-2xs);--container-spacing-inline-start:var(--vp-semantic-spacing-2xs);--container-spacing-inline-end:var(--vp-semantic-spacing-2xs);--halo-width:var(--vp-semantic-sizing-2xl);--halo-height:var(--vp-semantic-sizing-2xl)}.vp-toggle--small[data-checked]{--handle-width:var(--vp-semantic-sizing-m);--handle-height:var(--vp-semantic-sizing-m);--container-spacing-block-start:var(--vp-semantic-spacing-2xs);--container-spacing-block-end:var(--vp-semantic-spacing-2xs);--container-spacing-inline-start:var(--vp-semantic-spacing-2xs);--container-spacing-inline-end:var(--vp-semantic-spacing-2xs)}.vp-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--track-background);border:var(--track-border);border-radius:var(--track-border-radius);box-sizing:border-box;cursor:pointer;flex-grow:0;flex-shrink:0;height:var(--track-height);margin:0;padding:0;position:relative;transition:background-color var(--toggle-transition);width:var(--track-width)}.vp-toggle:before{background-image:radial-gradient(circle at center,var(--halo-color) 0,var(--halo-color) 70%,transparent 70%,transparent 100%);background-repeat:no-repeat;background-size:100% 100%;content:"";height:max(var(--touch-height),var(--halo-height));inset-block-start:50%;inset-inline-start:calc(var(--container-spacing-inline-start) + var(--handle-width)/2 - var(--halo-width)/2);position:absolute;transform:translateY(-50%);transition:inset-inline-start var(--toggle-transition);width:var(--halo-width)}.vp-toggle:after{background-color:var(--handle-background);border-radius:100%;content:"";height:var(--handle-height);top:0;right:0;bottom:0;left:0;margin-block:var(--container-spacing-block-start) var(--container-spacing-block-end);margin-inline:var(--container-spacing-inline-start) var(--container-spacing-inline-end);position:absolute;top:calc(var(--toggle-border-width)*-1);transition:transform var(--toggle-transition),width var(--toggle-transition),height var(--toggle-transition),margin var(--toggle-transition);width:var(--handle-width);z-index:1}.vp-toggle[data-checked]:before{inset-inline-start:calc(100% - var(--container-spacing-inline-end) - var(--handle-width)/2 - var(--halo-width)/2)}.vp-toggle[data-checked]:after{-webkit-mask-composite:destination-out;-webkit-mask-size:var(--checked-icon-size);-webkit-mask:var(--checked-ball-mask);mask:var(--checked-ball-mask);-webkit-mask-composite:xor;mask-composite:exclude;mask-size:var(--checked-icon-size);transform:translate(calc((var(--track-width) - var(--handle-width) - var(--container-spacing-inline-start) - var(--container-spacing-inline-end))*var(--toggle-rtl-direction)))}.vp-toggle[data-hover]{--halo-color:var(--halo-color-unchecked-hover)}.vp-toggle[data-hover][data-checked]{--halo-color:var(--halo-color-checked-hover)}.vp-toggle[data-active]{--halo-color:var(--halo-color-unchecked-active)}.vp-toggle[data-active][data-checked]{--halo-color:var(--halo-color-checked-active)}.vp-toggle[data-disabled]{cursor:default;opacity:var(--toggle-disabled-opacity)}}