.ui-spinner {
  animation: uiKitSpinnerRotation infinite 0.7s;
  display: inline-block;
}

.ui-spinner_size_xs {
  height: 25px;
  width: 25px;
}

.ui-spinner_size_s {
  height: 36px;
  width: 36px;
}

.ui-spinner_size_m {
  height: 50px;
  width: 50px;
}

.ui-spinner_size_l {
  height: 75px;
  width: 75px;
}

.ui-spinner_size_xl {
  height: 100px;
  width: 100px;
}

.ui-spinner {
  fill: var(--tx-spinner-color-light);
}

.ui-spinner_dark {
  fill: var(--tx-spinner-color-dark);
}

.ui-spinner_darker {
  fill: var(--tx-spinner-color-darker);
}

.ui-spinner_lighter {
  fill: none;
  stroke: var(--tx-spinner-color-lighter);
}

@keyframes uiKitSpinnerRotation {
  0% {
    animation-timing-function: steps(1, end);
    transform: rotate(0deg);
  }

  10% {
    animation-timing-function: steps(1, end);
    transform: rotate(36deg);
  }

  20% {
    animation-timing-function: steps(1, end);
    transform: rotate(72deg);
  }

  30% {
    animation-timing-function: steps(1, end);
    transform: rotate(108deg);
  }

  40% {
    animation-timing-function: steps(1, end);
    transform: rotate(144deg);
  }

  50% {
    animation-timing-function: steps(1, end);
    transform: rotate(180deg);
  }

  60% {
    animation-timing-function: steps(1, end);
    transform: rotate(216deg);
  }

  70% {
    animation-timing-function: steps(1, end);
    transform: rotate(252deg);
  }

  80% {
    animation-timing-function: steps(1, end);
    transform: rotate(288deg);
  }

  90% {
    animation-timing-function: steps(1, end);
    transform: rotate(324deg);
  }

  100% {
    animation-timing-function: steps(1, end);
    transform: rotate(360deg);
  }
}