/* This file is part of the BIMData Platform package.
(c) BIMData support@bimdata.io
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code. */
.loader {
  position: initial;
  background-color: transparent;
}
/* custom LOADER ------------------------ */
.loader-platform {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  @include flexbox;
  @include align-items(center);
  @include justify-content(center);
  &-layout {
    margin-top: 6rem;
    position: relative;
    background: none;
    @include flex-direction(column);
    &__text {
      margin-bottom: 1.5rem;
      color: $body-color;
      @include font-size(12px);
    }
    .lds-dual-ring {
      width: auto;
      height: auto;
    }
    .lds-dual-ring:after {
      width: 76px;
      height: 76px;
      border-color: $color-primary transparent $color-primary transparent;
      border-width: 5px;
    }
  }
}

.lds-dual-ring {
  width: 64px;
  height: 64px;
  @include flexbox;
  @include align-items(center);
  @include justify-content(center);
}
.lds-dual-ring:after {
  margin: 1px;
  width: 46px;
  height: 46px;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 5px solid $color-white;
  border-color: $color-white transparent $color-white transparent;
  @include animation(lds-dual-ring 1.2s linear infinite);
}

@include keyframes(lds-dual-ring) {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* custom LOADER BLOB ------------------------ */
$blob-size: 30px !default;

// Loader
.loader-blobs {
  width: 100%;
  height: 100%;
  position: relative;
  filter: url(#goo);
  overflow: hidden;
  border-radius: 70px;
  transform-style: preserve-3d;
  // Blob center item
  .blob-center {
    width: $blob-size;
    height: $blob-size;
    position: absolute;
    top: 50%;
    left: 50%;
    background: $color-primary;
    border-radius: 50%;
    transform-style: preserve-3d;
    @include animation(blob-grow linear 3.4s infinite);
    @include transform(scale(0.9) translate(-50%, -50%));
    @include transform-origin(left top);
  }
  svg {
    width: 100%;
    height: 100%;
    max-height: 22px;
  }
}

// Blob item
.blob {
  width: $blob-size;
  height: $blob-size;
  position: absolute;
  top: 50%;
  left: 50%;
  background: $color-primary;
  border-radius: 50%;
  opacity: 0;
  @include animation(blobs ease-out 3.4s infinite);
  @include transform(scale(0.9) translate(-50%, -50%));
  @include transform-origin(center top);

  // Set animation delay for each of type
  @for $i from 1 to 6 {
    &:nth-child(#{$i}) {
      animation-delay: $i * 0.2 + s;
    }
  }
}

// Keyframes variables
$left: calc(-200px - 50%);
$right: calc(200px - 50%);

// Keyframes
@keyframes blobs {
  0% {
    opacity: 0;
    @include transform(scale(0) translate($left, -50%));
  }
  1% {
    opacity: 1;
  }
  35%,
  65% {
    opacity: 1;
    @include transform(scale(0.9) translate(-50%, -50%));
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    @include transform(scale(0) translate($right, -50%));
  }
}

@keyframes blob-grow {
  0%,
  39% {
    @include transform(scale(0) translate(-50%, -50%));
  }
  40%,
  42% {
    @include transform(scale(1, 0.9) translate(-50%, -50%));
  }
  43%,
  44% {
    @include transform(scale(1.2, 1.1) translate(-50%, -50%));
  }
  45%,
  46% {
    @include transform(scale(1.3, 1.2) translate(-50%, -50%));
  }
  47%,
  48% {
    @include transform(scale(1.4, 1.3) translate(-50%, -50%));
  }
  52% {
    @include transform(scale(1.5, 1.4) translate(-50%, -50%));
  }
  54% {
    @include transform(scale(1.7, 1.6) translate(-50%, -50%));
  }
  58% {
    @include transform(scale(1.8, 1.7) translate(-50%, -50%));
  }
  68%,
  70% {
    @include transform(scale(1.7, 1.5) translate(-50%, -50%));
  }
  78% {
    @include transform(scale(1.6, 1.4) translate(-50%, -50%));
  }
  80%,
  81% {
    @include transform(scale(1.5, 1.4) translate(-50%, -50%));
  }
  82%,
  83% {
    @include transform(scale(1.4, 1.3) translate(-50%, -50%));
  }
  84%,
  85% {
    @include transform(scale(1.3, 1.2) translate(-50%, -50%));
  }
  86%,
  87% {
    @include transform(scale(1.2, 1.1) translate(-50%, -50%));
  }
  90%,
  91% {
    @include transform(scale(1, 0.9) translate(-50%, -50%));
  }
  92%,
  100% {
    @include transform(scale(0) translate(-50%, -50%));
  }
}
