:root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
  --neeto-ui-spinner-size: 1.25rem;
  --neeto-ui-spinner-border-width: 0.1875rem;
  --neeto-ui-spinner-color: rgb(var(--neeto-ui-gray-600));
}

.neeto-ui-spinner {
  position: relative;
  display: inline-block;
  aspect-ratio: 1;
  border-radius: 50%;
  border-style: solid;
  border-width: var(--neeto-ui-spinner-border-width);
  border-color: var(--neeto-ui-spinner-color);
  font-size: var(--neeto-ui-spinner-size);
  width: var(--neeto-ui-spinner-size);
  height: var(--neeto-ui-spinner-size);
  animation: neeto-ui-spanner-anim1 0.8s infinite linear alternate,
  neeto-ui-spanner-anim2 1.6s infinite linear;

  &--light {
    --neeto-ui-spinner-color: rgb(var(--neeto-ui-white));
  }

  &--size-small {
    --neeto-ui-spinner-size: 1rem;
    --neeto-ui-spinner-border-width: 0.1875rem;
  }
}

@keyframes neeto-ui-spanner-anim1 {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  12.5% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 0%,
      100% 0%,
      100% 0%
    );
  }
  25% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      100% 100%,
      100% 100%
    );
  }
  50% {
    clip-path: polygon(
      50% 50%,
      0 0,
      50% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }
  62.5% {
    clip-path: polygon(
      50% 50%,
      100% 0,
      100% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }
  75% {
    clip-path: polygon(
      50% 50%,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      50% 100%,
      0% 100%
    );
  }
  100% {
    clip-path: polygon(
      50% 50%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      50% 100%,
      0% 100%
    );
  }
}
@keyframes neeto-ui-spanner-anim2 {
  0% {
    transform: scaleY(1) rotate(0deg);
  }
  49.99% {
    transform: scaleY(1) rotate(135deg);
  }
  50% {
    transform: scaleY(-1) rotate(0deg);
  }
  100% {
    transform: scaleY(-1) rotate(-135deg);
  }
}

.neetix-spinner {
  --neeto-ui-spinner-size: 2rem;
  --neeto-ui-spinner-color: rgb(var(--neeto-ui-primary-500));
}
