/* Spinner loader component

    1) add html <div class="spinner-loader"></div>
    2) add css "position:relative" to parent container
    3) "display:block" when loader needs to be shown
    4) use "white" class in non-white background. "blue" otherwise
*/

.spinner-loader {
  display: none;
  position: absolute;
  width: 18px;
  padding: 2px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  mask: conic-gradient(#0000, #000) subtract,
    linear-gradient(#000 0 0) content-box;
  box-sizing: border-box;
  animation: load 1s linear infinite;
}

/* For non-white backgrounds */
.spinner-loader.white {
  background-color: var(--white1);
}

/* For white backgrounds */
.spinner-loader.blue,
.spinner-loader.transparent {
  background: #1f74b7;
}

/* Creates loading effect */
@keyframes load {
  to {
    transform: rotate(1turn);
  }
}