@use '../utils' as *;

/*=============================
    00. Preloader
===============================*/
#preloader {
    background-color: var(--tg-color-white-default);
    height: 100%;
    width: 100%;
    position: absolute;
    margin-top: 0px;
    top: 0px;
    z-index: 9999;
    & .loader {
        & .loader-container {
            position: absolute;
            top: 50%;
            left: 50%;
            @include transform(translate(-50%, -50%));
            width: 100px;
            height: 100px;
            border: 3px solid var(--tg-color-gray-1);
            @include border-radius(50%);
            &::before {
                position: absolute;
                content: "";
                display: block;
                top: 50%;
                left: 50%;
                @include transform(translate(-50%, -50%));
                width: 100px;
                height: 100px;
                border-top: 3px solid var(--tg-theme-primary);
                @include border-radius(50%);
                animation: loaderspin 1.8s infinite ease-in-out;
                -webkit-animation: loaderspin 1.8s infinite ease-in-out;
            }
        }
        & .loader-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            @include transform(translate(-50%, -50%));
            width: 80px;
            text-align: center;
            & img {
                animation: loaderpulse alternate 900ms infinite;
                width: 40px;
            }
        }
    }
}
@keyframes loaderspin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes loaderspin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes loaderpulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}