.loading-spinner {
  display: flex;
  justify-content: center;

  .loading-spinner-body {
    position: relative;
    z-index: 0;
    border-radius: 50%;
    border-top: solid #eaeaea;
    border-right: solid var(--color-bg-brand-solid);
    border-bottom: solid #eaeaea;
    border-left: solid #eaeaea;
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    animation: spinnerAnimation 0.45s infinite linear;
  }

  &.big {
    .loading-spinner-body {
      border-width: 12px;
      width: 150px;
      height: 150px;
    }
  }

  &.small {
    .loading-spinner-body {
      border-width: 2px;
      width: 25px;
      height: 25px;
    }
  }

  &.tiny {
    .loading-spinner-body {
      border-width: 1px;
      width: 15px;
      height: 15px;
    }
  }
}

@keyframes spinnerAnimation {
  0% {
    transform: rotate(0deg);
  }

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