.spinnerContainer[data-stb-spinner=current]{--spinner-container-size: var(--p-spacing-rem-96);--spinner-radius: 44;--spinner-perimeter: calc(2 * pi * var(--spinner-radius));--spinner-perimeter-full: calc(var(--spinner-perimeter) * 1px);--spinner-perimeter-fraction: calc(.001 * var(--spinner-perimeter) * 1px);--spinner-track-color: var(--p-color-static-grey-background);--spinner-ticker-color: var(--p-color-static-brand-foreground);--text-color: var(--p-color-text-primary);align-items:center;color:var(--text-color);display:flex;flex-direction:column;gap:var(--p-spacing-08);width:var(--spinner-container-size);& svg{height:100%;width:100%}p{font-size:1rem;white-space:nowrap}&.xxsmall{--spinner-radius: 8;--spinner-container-size: var(--p-spacing-rem-16)}&.xsmall{--spinner-radius: 10;--spinner-container-size: 1.375rem}&.small{--spinner-radius: 11;--spinner-container-size: var(--p-spacing-rem-24)}&.medium{--spinner-radius: 24;--spinner-container-size: var(--p-spacing-rem-48);p{font-size:.875rem}}&.onRed{--spinner-track-color: var(--p-color-static-grey-background);--spinner-ticker-color: var(--p-color-static-grey-foreground);--text-color: var(--p-color-text-primary)}.spinner{animation:loading-indicator-spinner-rotate 5s linear infinite}.spinnerTrack{stroke:var(--spinner-track-color)}.spinnerInMotion{animation:loading-indicator-spinner-spin infinite 6s ease-in-out;stroke:var(--spinner-ticker-color);stroke-dasharray:var(--spinner-perimeter);transform-origin:var(--spinner-radius) var(--spinner-radius) 0}}@keyframes loading-indicator-spinner-spin{0%{stroke-dasharray:var(--spinner-perimeter-full),var(--spinner-perimeter-fraction);transform:rotate(0)}50%{stroke-dasharray:var(--spinner-perimeter-fraction),var(--spinner-perimeter-full);transform:rotate(720deg)}to{stroke-dasharray:var(--spinner-perimeter-full),var(--spinner-perimeter-fraction);transform:rotate(1080deg)}}@keyframes loading-indicator-spinner-rotate{0%{transform:rotate(0)}50%{transform:rotate(720deg)}to{transform:rotate(1080deg)}}
