@layer design-system.components{.vds-progress{--progress-height:var(--vds-space-2,.5rem);--progress-radius:var(--vds-radius-full,9999px);--progress-track-bg:var(--vds-color-bg-muted);--progress-fill-color:var(--vds-color-primary-solid);--progress-fill-color-end:var(--vds-color-primary-solid-hover);--progress-transition-duration:var(--vds-duration-slow,.3s);--progress-transition-easing:var(--vds-ease-out,cubic-bezier(0, 0, .2, 1));--progress-animation-duration:1.6s;--progress-stripe-size:1.25rem;--progress-glow-spread:8px}.vds-progress[data-color=success]{--progress-fill-color:var(--vds-color-success-solid);--progress-fill-color-end:var(--vds-color-success-solid-hover)}.vds-progress[data-color=warning]{--progress-fill-color:var(--vds-color-warning-solid);--progress-fill-color-end:var(--vds-color-warning-solid-hover)}.vds-progress[data-color=danger]{--progress-fill-color:var(--vds-color-danger-solid);--progress-fill-color-end:var(--vds-color-danger-solid-hover)}.vds-progress[data-color=info]{--progress-fill-color:var(--vds-color-info-solid);--progress-fill-color-end:var(--vds-color-info-solid-hover)}.vds-progress[data-color=accent]{--progress-fill-color:var(--vds-color-accent-solid);--progress-fill-color-end:var(--vds-color-accent-solid-hover)}.vds-progress[data-color=contrast]{--progress-fill-color:var(--vds-color-text);--progress-fill-color-end:var(--vds-color-text-muted)}.vds-progress[data-size=xs]{--progress-height:var(--vds-space-1,.25rem)}.vds-progress[data-size=sm]{--progress-height:var(--vds-space-1-5,.375rem)}.vds-progress[data-size=lg]{--progress-height:var(--vds-space-3,.75rem)}.vds-progress[data-size=xl]{--progress-height:var(--vds-space-4,1rem)}}
@layer design-system.components{.vds-progress{inline-size:100%;block-size:var(--progress-height);border-radius:var(--progress-radius);background-color:var(--progress-track-bg);isolation:isolate;position:relative;overflow:hidden}.vds-progress-indicator{background-color:var(--progress-fill-color);border-radius:inherit;block-size:100%;inline-size:0%;transition:inline-size var(--progress-transition-duration) var(--progress-transition-easing), background-color var(--vds-duration-normal,.2s) var(--progress-transition-easing);will-change:inline-size}.vds-progress[data-variant=gradient] .vds-progress-indicator{background-image:linear-gradient(to right, color-mix(in oklch, var(--progress-fill-color) 70%, transparent), var(--progress-fill-color) 50%, var(--progress-fill-color-end));background-color:#0000}.vds-progress[data-variant=striped] .vds-progress-indicator{background-image:repeating-linear-gradient(-45deg, transparent, transparent calc(var(--progress-stripe-size) * .5), #fff3 calc(var(--progress-stripe-size) * .5), #fff3 var(--progress-stripe-size));background-size:var(--progress-stripe-size) var(--progress-stripe-size);background-color:var(--progress-fill-color);animation:vds-progress-stripes var(--progress-animation-duration) linear infinite}@supports (color:lab(0% 0 0)){.vds-progress[data-variant=striped] .vds-progress-indicator{background-image:repeating-linear-gradient(-45deg, transparent, transparent calc(var(--progress-stripe-size) * .5), lab(100% 0 0/.2) calc(var(--progress-stripe-size) * .5), lab(100% 0 0/.2) var(--progress-stripe-size))}}.vds-progress[data-state=indeterminate] .vds-progress-indicator{animation:vds-progress-indeterminate calc(var(--progress-animation-duration) * 1.1) var(--vds-ease-in-out,cubic-bezier(.4, 0, .2, 1)) infinite;border-radius:var(--progress-radius);inline-size:40%!important}.vds-progress[data-animated=pulse] .vds-progress-indicator{animation:vds-progress-pulse calc(var(--progress-animation-duration) * 1.25) var(--vds-ease-in-out,cubic-bezier(.4, 0, .2, 1)) infinite}.vds-progress[data-animated=pulse][data-variant=striped] .vds-progress-indicator{animation:vds-progress-stripes var(--progress-animation-duration) linear infinite, vds-progress-pulse calc(var(--progress-animation-duration) * 1.25) var(--vds-ease-in-out) infinite}.vds-progress[data-animated=pulse][data-state=indeterminate] .vds-progress-indicator{animation:vds-progress-indeterminate calc(var(--progress-animation-duration) * 1.1) var(--vds-ease-in-out) infinite}.vds-progress[data-animated=glow]{animation:vds-progress-glow var(--progress-animation-duration) var(--vds-ease-in-out) infinite}.vds-progress[data-animated=glow][data-variant=striped] .vds-progress-indicator{animation:vds-progress-stripes var(--progress-animation-duration) linear infinite}.vds-progress-label{color:var(--vds-color-on-solid,#fff);letter-spacing:.03em;pointer-events:none;white-space:nowrap;font-size:.625rem;font-weight:600;line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.vds-progress[data-size=xs] .vds-progress-label,.vds-progress[data-size=sm] .vds-progress-label,.vds-progress[data-size=md] .vds-progress-label{display:none}}@keyframes vds-progress-stripes{0%{background-position:0 0}to{background-position:var(--progress-stripe-size) 0}}@keyframes vds-progress-indeterminate{0%{margin-inline-start:-60%}60%{margin-inline-start:100%}to{margin-inline-start:100%}}@keyframes vds-progress-pulse{0%,to{opacity:1}50%{opacity:.65}}@keyframes vds-progress-glow{0%,to{box-shadow:0 0 var(--progress-glow-spread) 0 color-mix(in oklch, var(--progress-fill-color) 60%, transparent)}50%{box-shadow:0 0 calc(var(--progress-glow-spread) * 2.5) 2px color-mix(in oklch, var(--progress-fill-color) 80%, transparent)}}