.app-spinner{color:var(--spinner-color);justify-content:center;align-items:center;transition:all .2s;display:inline-flex}.app-spinner:focus-visible{outline:var(--stroke-2) solid var(--border-focus);outline-offset:var(--stroke-2)}.app-spinner__circular{width:var(--spinner-width);height:var(--spinner-height);position:relative}.app-spinner__circular svg{width:100%;height:100%}.app-spinner__circular-indicator{animation:circular-spin var(--animation-duration) linear infinite;transform-origin:50%}@keyframes circular-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.app-spinner__dots{gap:var(--spacing-4);justify-content:center;align-items:center;display:flex}.app-spinner__dot{border-radius:var(--radius-full);width:6px;height:6px;animation:dots-bounce var(--animation-duration) ease-in-out infinite;background-color:currentColor}.app-spinner__dot:first-child{animation-delay:-.32s}.app-spinner__dot:nth-child(2){animation-delay:-.16s}.app-spinner__dot:nth-child(3){animation-delay:0s}@keyframes dots-bounce{0%,80%,to{opacity:.5;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.app-spinner__pulse{width:var(--spinner-width);height:var(--spinner-height);position:relative}.app-spinner__pulse-ring{border-radius:var(--radius-full);width:100%;height:100%;animation:pulse-ring var(--animation-duration) cubic-bezier(.455,.03,.515,.955) infinite;border:2px solid;position:absolute;top:0;left:0}.app-spinner__pulse-ring:first-child{animation-delay:0s}.app-spinner__pulse-ring:nth-child(2){animation-delay:calc(var(--animation-duration)*.33)}.app-spinner__pulse-ring:nth-child(3){animation-delay:calc(var(--animation-duration)*.66)}@keyframes pulse-ring{0%{opacity:1;transform:scale(.33)}80%,to{opacity:0;transform:scale(1)}}.app-spinner--small .app-spinner__dot{width:4px;height:4px}.app-spinner--large .app-spinner__dot{width:8px;height:8px}.app-spinner--xlarge .app-spinner__dot{width:10px;height:10px}.app-spinner--small .app-spinner__dots{gap:var(--spacing-2)}.app-spinner--large .app-spinner__dots{gap:var(--spacing-6)}.app-spinner--xlarge .app-spinner__dots{gap:var(--spacing-8)}.app-spinner--slow .app-spinner__circular-indicator{animation-timing-function:ease-in-out}.app-spinner--fast .app-spinner__circular-indicator{animation-timing-function:linear}@media (prefers-reduced-motion:reduce){.app-spinner__circular-indicator,.app-spinner__dot,.app-spinner__pulse-ring{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (prefers-contrast:more){.app-spinner{border-radius:var(--radius-4);padding:var(--spacing-2);border:1px solid}}