// 
// preloader.scss
//

#preloader {
  position: fixed;
  inset: 0;                     /* full screen */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.35);  /* dim backdrop */
  z-index: 99999;
}

#status {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Example spinner — tweak as you like */
.spinner-chase {
  width: 48px;
  height: 48px;
  position: relative;
}

.chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  animation: chase 2.5s infinite linear both;
}

.chase-dot:before {
  content: "";
  display: block;
  width: 25%;
  height: 25%;
  background-color: white;
  border-radius: 50%;
  animation: chase-dot 2s infinite ease-in-out both;
}

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

@keyframes chase-dot {
  50% { transform: scale(0.4); }
  100% { transform: scale(1); }
}

.spinner{
    .spin-icon {
        font-size: 48px;
        color: $primary;
        position: relative;
        display: inline-block;
        animation: spin 1.6s infinite linear;
    }
}

@keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(359deg);
    }
}