@layer vitamin-play{.vp-badge{--badge-border-color:var(--vp-semantic-color-container-neutral);--badge-border-radius:var(--vp-semantic-border-radius-full);--badge-border-width:var(--vp-semantic-border-width-s);--badge-background-color:var(--vp-semantic-color-container-brand);--badge-color:var(--vp-semantic-color-content-on-brand-neutral);--badge-min-height:var(--vp-semantic-sizing-xs);--badge-min-width:var(--vp-semantic-sizing-xs);--badge-webkit-font-smoothing:var(--vp-semantic-typography-screen-s-caption-webkit-font-smoothing);--badge-text-case:var(--vp-semantic-typography-screen-s-caption-text-case);--badge-text-decoration:var(--vp-semantic-typography-screen-s-caption-text-decoration);--badge-letter-spacing:var(--vp-semantic-typography-screen-s-caption-letter-spacing);--badge-font-size:var(--vp-semantic-typography-screen-s-caption-font-size);--badge-line-height:var(--vp-semantic-typography-screen-s-caption-line-height);--badge-font-weight:var(--vp-semantic-typography-screen-s-caption-font-weight);--badge-font-family:var(--vp-semantic-typography-screen-s-caption-font-family);--badge-padding:var(--vp-semantic-spacing-4xs) var(--vp-semantic-spacing-2xs) var(--vp-semantic-spacing-4xs) var(--vp-semantic-spacing-2xs)}.vp-badge--important{--badge-border-color:var(--vp-semantic-color-container-neutral);--badge-background-color:var(--vp-semantic-color-status-negative);--badge-color:var(--vp-semantic-color-content-inverse)}.vp-badge:empty{--badge-padding:var(--vp-semantic-spacing-3xs) var(--vp-semantic-spacing-3xs) var(--vp-semantic-spacing-3xs) var(--vp-semantic-spacing-3xs)}.vp-badge{align-items:center;background-color:var(--badge-background-color);border-color:var(--badge-border-color);border-radius:var(--badge-border-radius);border-style:solid;border-width:var(--badge-border-width);color:var(--badge-color);display:inline-flex;justify-content:center;min-height:var(--badge-min-height);min-width:var(--badge-min-width);padding:var(--badge-padding);position:relative;-webkit-font-smoothing:var(--badge-webkit-font-smoothing);cursor:inherit;font-family:var(--badge-font-family);font-size:var(--badge-font-size);font-weight:var(--badge-font-weight);letter-spacing:var(--badge-letter-spacing);line-height:var(--badge-line-height);-webkit-text-decoration:var(--badge-text-decoration);text-decoration:var(--badge-text-decoration);text-transform:var(--badge-text-case);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.vp-badge--bottom-inline-end,.vp-badge--bottom-inline-start,.vp-badge--bottom-left,.vp-badge--bottom-right,.vp-badge--top-inline-end,.vp-badge--top-inline-start,.vp-badge--top-left,.vp-badge--top-right{pointer-events:none;position:absolute}.vp-badge--bottom-inline-end:empty,.vp-badge--bottom-inline-start:empty,.vp-badge--bottom-left:empty,.vp-badge--bottom-right:empty,.vp-badge--top-inline-end:empty,.vp-badge--top-inline-start:empty,.vp-badge--top-left:empty,.vp-badge--top-right:empty{translate:var(--badge-empty-translate)}.vp-badge--top-inline-end,.vp-badge--top-inline-start,.vp-badge--top-left,.vp-badge--top-right{top:0}.vp-badge--top-inline-start{inset-inline-start:0;--badge-empty-translate:50% 50%}.vp-badge--top-inline-end,[dir=rtl] .vp-badge--top-inline-start{--badge-empty-translate:-50% 50%}.vp-badge--top-inline-end{inset-inline-end:0}.vp-badge--top-left,[dir=rtl] .vp-badge--top-inline-end{--badge-empty-translate:50% 50%}.vp-badge--top-left{left:0}.vp-badge--top-right{right:0;--badge-empty-translate:-50% 50%}.vp-badge--bottom-inline-end,.vp-badge--bottom-inline-start,.vp-badge--bottom-left,.vp-badge--bottom-right{bottom:0}.vp-badge--bottom-left{left:0;--badge-empty-translate:50% -50%}.vp-badge--bottom-right{right:0;--badge-empty-translate:-50% -50%}.vp-badge--bottom-inline-start{inset-inline-start:0;--badge-empty-translate:50% -50%}.vp-badge--bottom-inline-end,[dir=rtl] .vp-badge--bottom-inline-start{--badge-empty-translate:-50% -50%}.vp-badge--bottom-inline-end{inset-inline-end:0}[dir=rtl] .vp-badge--bottom-inline-end{--badge-empty-translate:50% -50%}}@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)}}