/* HTML: <div class="spinner-loader"></div> */
:root {
  /* Spinner Variables */
  --spinner-size: 5vh;
  --spinner-primary-color: var(--secondary-color-dark);
  --spinner-secondary-color: #0000;
  --spinner-dot-size: 0.8vh;
  --spinner-animation-duration: 1s;
}

.spinner-loader {
  width: var(--spinner-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(
      farthest-side,
      var(--spinner-primary-color) 94%,
      var(--spinner-secondary-color)
    )
    top/var(--spinner-dot-size) var(--spinner-dot-size) no-repeat,
    conic-gradient(var(--spinner-secondary-color) 30%, var(--spinner-primary-color));
  -webkit-mask: radial-gradient(
    farthest-side,
    var(--spinner-secondary-color) calc(100% - var(--spinner-dot-size)),
    #000 0
  );
  animation: l13 var(--spinner-animation-duration) infinite linear;
}

@keyframes l13 {
  100% {
    transform: rotate(1turn);
  }
}