:host {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}

:host .--c-spinner-svg {
  width: 24px;
  height: 24px;
}

:host(.small) {
  gap: 5px;
}

:host(.small) .--c-spinner-svg {
  width: 18px;
  height: 18px;
}

:host(.spinner-smlargeall) {
  gap: 10px;
}

:host(.large) .--c-spinner-svg {
  width: 32px;
  height: 32px;
}

:host .--c-spinner-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-spinner-text);
}

:host(.small) .--c-spinner-text {
  font-size: 12px;
}

:host(.large) .--c-spinner-text {
  font-size: 16px;
}

:host .--c-spinner-path {
  transform-origin: center;
  animation: spin 0.75s infinite linear;
  fill: var(--color-spinner);
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.--c-spinner-path.bars {
  transform-origin: center;
  animation: spin_bars 0.75s step-end infinite;
}

@keyframes spin_bars {
  8.3% {
    transform: rotate(30deg);
  }
  16.6% {
    transform: rotate(60deg);
  }
  25% {
    transform: rotate(90deg);
  }
  33.3% {
    transform: rotate(120deg);
  }
  41.6% {
    transform: rotate(150deg);
  }
  50% {
    transform: rotate(180deg);
  }
  58.3% {
    transform: rotate(210deg);
  }
  66.6% {
    transform: rotate(240deg);
  }
  75% {
    transform: rotate(270deg);
  }
  83.3% {
    transform: rotate(300deg);
  }
  91.6% {
    transform: rotate(330deg);
  }
  100% {
    transform: rotate(360deg);
  }
}