.spinnerContainer[data-stb-spinner='true'] {
  /*
   * Default values result in type = 'Large'
   * Note on --spinner-radius. Is currently hard coded based on const innerRadius in index.tsx
   */
  --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(0.001 * var(--spinner-perimeter) * 1px);
  --spinner-track-color: var(--p-color-static-grey-background);
  --spinner-ticker-color: var(--p-color-static-red-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);

  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: 0.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(0deg);
  }

  50% {
    stroke-dasharray:
      var(--spinner-perimeter-fraction), var(--spinner-perimeter-full);
    transform: rotate(720deg);
  }

  100% {
    stroke-dasharray:
      var(--spinner-perimeter-full), var(--spinner-perimeter-fraction);
    transform: rotate(1080deg);
  }
}

@keyframes loading-indicator-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(720deg);
  }

  100% {
    transform: rotate(1080deg);
  }
}