@layer design-system.components{.vds-spinner{--spinner-size:1.25rem;--spinner-track-width:2px;--spinner-dot-size:.375rem;--spinner-bar-width:.1875rem;--spinner-color:var(--vds-color-primary-solid,#4f46e5);--spinner-track-color:var(--vds-color-primary-bg,#e0e7ff);--spinner-ring-dur:.75s;--spinner-dots-dur:1.4s;--spinner-bars-dur:1.2s;--spinner-ripple-dur:1.6s}.vds-spinner[data-size=xs]{--spinner-size:.75rem;--spinner-track-width:1.5px;--spinner-dot-size:.25rem;--spinner-bar-width:.125rem}.vds-spinner[data-size=sm]{--spinner-size:1rem;--spinner-track-width:1.5px;--spinner-dot-size:.3125rem;--spinner-bar-width:.1875rem}.vds-spinner[data-size=lg]{--spinner-size:2rem;--spinner-track-width:2.5px;--spinner-dot-size:.5rem;--spinner-bar-width:.25rem}.vds-spinner[data-size=xl]{--spinner-size:3rem;--spinner-track-width:3px;--spinner-dot-size:.625rem;--spinner-bar-width:.3125rem}.vds-spinner[data-color=success]{--spinner-color:var(--vds-color-success-solid,#16a34a);--spinner-track-color:var(--vds-color-success-bg,#dcfce7)}.vds-spinner[data-color=warning]{--spinner-color:var(--vds-color-warning-solid,#d97706);--spinner-track-color:var(--vds-color-warning-bg,#fef9c3)}.vds-spinner[data-color=danger]{--spinner-color:var(--vds-color-danger-solid,#dc2626);--spinner-track-color:var(--vds-color-danger-bg,#fee2e2)}.vds-spinner[data-color=info]{--spinner-color:var(--vds-color-info-solid,#0ea5e9);--spinner-track-color:var(--vds-color-info-bg,#e0f2fe)}.vds-spinner[data-color=accent]{--spinner-color:var(--vds-color-accent-solid,#7c3aed);--spinner-track-color:var(--vds-color-accent-bg,#ede9fe)}.vds-spinner[data-color=neutral]{--spinner-color:var(--vds-color-neutral-solid,#4b5563);--spinner-track-color:var(--vds-color-neutral-bg,#f3f4f6)}.vds-spinner[data-color=current]{--spinner-color:currentColor;--spinner-track-color:color-mix(in oklch, currentColor 18%, transparent)}.vds-spinner[data-speed=slow]{--spinner-ring-dur:1.4s;--spinner-dots-dur:2s;--spinner-bars-dur:1.8s;--spinner-ripple-dur:2.6s}.vds-spinner[data-speed=fast]{--spinner-ring-dur:.45s;--spinner-dots-dur:.9s;--spinner-bars-dur:.75s;--spinner-ripple-dur:1s}}
@layer design-system.components{@keyframes vds-sp-spin{to{transform:rotate(360deg)}}@keyframes vds-sp-dot{0%,80%,to{opacity:.35;transform:scale(.5)}40%{opacity:1;transform:scale(1)}}@keyframes vds-sp-bar{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}@keyframes vds-sp-ripple{0%{opacity:.75;transform:scale(0)}to{opacity:0;transform:scale(1)}}.vds-spinner{inline-size:var(--spinner-size);block-size:var(--spinner-size);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.vds-spinner[data-variant=ring]{border:var(--spinner-track-width) solid var(--spinner-track-color);border-block-start-color:var(--spinner-color);animation:vds-sp-spin var(--spinner-ring-dur) linear infinite;border-radius:50%}.vds-spinner[data-variant=segments]{background:conic-gradient(from 0deg, transparent 0deg, var(--spinner-color) 270deg, transparent 360deg);-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--spinner-track-width) - 1px), #000 calc(100% - var(--spinner-track-width)));-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--spinner-track-width) - 1px), #000 calc(100% - var(--spinner-track-width)));mask:radial-gradient(farthest-side, transparent calc(100% - var(--spinner-track-width) - 1px), #000 calc(100% - var(--spinner-track-width)));animation:vds-sp-spin var(--spinner-ring-dur) linear infinite;border-radius:50%}.vds-spinner[data-variant=dots]{gap:calc(var(--spinner-dot-size) * .6);inline-size:auto}.vds-spinner[data-variant=dots] .vds-spinner__dot{inline-size:var(--spinner-dot-size);block-size:var(--spinner-dot-size);background:var(--spinner-color);animation:vds-sp-dot var(--spinner-dots-dur) ease-in-out infinite;border-radius:50%;flex-shrink:0;display:block}.vds-spinner[data-variant=dots] .vds-spinner__dot:nth-child(2){animation-delay:.16s}.vds-spinner[data-variant=dots] .vds-spinner__dot:nth-child(3){animation-delay:.32s}.vds-spinner[data-variant=bars]{align-items:flex-end;gap:calc(var(--spinner-bar-width) * .85);inline-size:auto}.vds-spinner[data-variant=bars] .vds-spinner__bar{inline-size:var(--spinner-bar-width);block-size:var(--spinner-size);border-radius:var(--spinner-bar-width);background:var(--spinner-color);transform-origin:bottom;animation:vds-sp-bar var(--spinner-bars-dur) ease-in-out infinite;flex-shrink:0;display:block}.vds-spinner[data-variant=bars] .vds-spinner__bar:nth-child(2){animation-delay:.1s}.vds-spinner[data-variant=bars] .vds-spinner__bar:nth-child(3){animation-delay:.2s}.vds-spinner[data-variant=bars] .vds-spinner__bar:nth-child(4){animation-delay:.3s}.vds-spinner[data-variant=ripple]{position:relative}.vds-spinner[data-variant=ripple]:before,.vds-spinner[data-variant=ripple]:after{content:"";border:var(--spinner-track-width) solid var(--spinner-color);animation:vds-sp-ripple var(--spinner-ripple-dur) cubic-bezier(0, .2, .8, 1) infinite;border-radius:50%;position:absolute;inset:0}.vds-spinner[data-variant=ripple]:after{animation-delay:calc(var(--spinner-ripple-dur) * -.5)}.vds-spinner[data-variant=orbit]{border:var(--spinner-track-width) solid var(--spinner-track-color);animation:vds-sp-spin var(--spinner-ring-dur) linear infinite;border-radius:50%;position:relative}.vds-spinner[data-variant=orbit]:before{content:"";inline-size:calc(var(--spinner-track-width) * 3);block-size:calc(var(--spinner-track-width) * 3);background:var(--spinner-color);border-radius:50%;position:absolute;inset-block-start:calc(var(--spinner-track-width) * -1);inset-inline-start:50%;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){.vds-spinner,.vds-spinner *{animation-duration:.01ms!important;animation-iteration-count:1!important}}}