.preloader {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999999;
  background-color: $color-1;
  // overflow-x: clip;

  .agx-btn {
    font-weight: 700;
  }
}

.preloader-inner {
  @extend %p-absolute,
    %d-flex,
    %flex-col,
    %justify-center,
    %item-center,
    %text-center,
    %text-center;
  left: 50%;
  top: 50%;
  gap: 20px;
  @include transform(translate(-50%, -50%));

  img {
    @extend %d-block;
  }
}

.loader {
  @extend %d-block;
  -webkit-animation: loaderspin 1.5s infinite;
  animation: loaderspin 1.5s infinite;
  height: 50px;
  width: 50px;

  &:before,
  &:after {
    border-radius: 50%;
    content: "";
    display: block;
    height: 20px;
    width: 20px;
  }

  &:before {
    animation: ball1 1.5s infinite;
    background-color: $color-5;
    box-shadow: 30px 0 0 $color-primary;
    margin-bottom: 10px;
  }

  &:after {
    animation: ball2 1.5s infinite;
    background-color: $color-primary;
    box-shadow: 30px 0 0 $color-primary;
  }
}
