@keyframes wcs-spinner-grow {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes wcs-spinner-rotate {
  0% {
    transform: rotate(0deg);
    transform-origin: center;
  }
  100% {
    transform: rotate(360deg);
    transform-origin: center;
  }
}
@keyframes wcs-spinner-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -131;
  }
}
:host {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border-radius: 50%;
  --wcs-spinner-dashed-background-circle: var(--wcs-semantic-color-background-surface-tertiary);
  --wcs-spinner-rotating-circle-color: var(--wcs-semantic-color-background-surface-brand);
  --wcs-spinner-rotate-animation-duration: var(--wcs-semantic-motion-duration-animation-base);
  --wcs-spinner-dashed-animation-duration: var(--wcs-semantic-motion-duration-animation-base);
  --wcs-spinner-growing-animation-duration: var(--wcs-semantic-motion-duration-animation-fast);
}

:host([mode=border]) svg .dashed-background-circle {
  stroke: var(--wcs-spinner-dashed-background-circle);
  stroke-width: 7px;
  stroke-dasharray: 3, 3;
  stroke-dashoffset: 1;
  stroke-linecap: butt;
}
:host([mode=border]) svg .infinite-rotation-container {
  animation: wcs-spinner-rotate var(--wcs-spinner-rotate-animation-duration) linear infinite;
}
:host([mode=border]) svg .dash-rotating-circle {
  stroke: var(--wcs-spinner-rotating-circle-color);
  stroke-width: 8px;
  stroke-linecap: round;
  animation: wcs-spinner-dash var(--wcs-spinner-dashed-animation-duration) ease-in-out infinite;
}

:host([mode=growing]) {
  background-color: var(--wcs-spinner-rotating-circle-color);
  opacity: 0;
  animation: wcs-spinner-grow var(--wcs-spinner-growing-animation-duration) ease-out infinite;
}