.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);color:var(--text-color);align-items:center;gap:var(--p-spacing-08);width:var(--spinner-container-size);flex-direction:column;display:flex;& svg{width:100%;height:100%}& p{white-space:nowrap;font-size:1rem}&.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:5s linear infinite loading-indicator-spinner-rotate}& .spinnerTrack{stroke:var(--spinner-track-color)}& .spinnerInMotion{stroke:var(--spinner-ticker-color);stroke-dasharray:var(--spinner-perimeter);transform-origin:var(--spinner-radius) var(--spinner-radius) 0;animation:6s ease-in-out infinite loading-indicator-spinner-spin}}@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)}}