//
// Loader
// --------------------------------------------------

@import './mixins/project/misc';

// https://github.com/tobiasahlin/SpinKit/blob/master/scss/spinners/7-three-bounce.scss

.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  // Elements
  // --------------------------

  &-bounce {
    $loader-bounce-size: $grid-unit-y * 5;
    $animationDuration: 1.4s;
    $delayRange: 0.32s;

    margin: $grid-unit-y * 5 auto;
    width: $loader-bounce-size * 2;
    text-align: center;

    &-item {
      width: $loader-bounce-size * 0.5;
      height: $loader-bounce-size * 0.5;
      background-color: $brand-primary;
      border-radius: 100%;
      display: inline-block;

      @include animation(sk-three-bounce 1.4s infinite ease-in-out both);
    }

    &-1 {
      @include animation-delay(-$delayRange);
    }

    &-2 {
      @include animation-delay(-$delayRange * 0.5);
    }
  }

  &-title {
    font-size: $font-size-h4;
    line-height: $grid-unit-y * 3;

    @include themes(color, color-text-dark);

    & + .loader-bounce {
      margin-top: $grid-unit-y * 2;
    }
  }

  // Style variations
  // --------------------------

  &-buffer {
    padding: $grid-unit-y * 7;
  }

  &-right {
    align-items: flex-end;
  }

  &-left {
    align-items: flex-start;
  }

  &-big {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: $zindex-loader-big;
  }

  // Size variations
  // --------------------------

  &-sm {
    .loader-bounce {
      $loader-bounce-size: $grid-unit-y * 3;

      margin: $grid-unit-y * 3 auto;
      width: $loader-bounce-size * 2;

      &-item {
        width: $loader-bounce-size * 0.5;
        height: $loader-bounce-size * 0.5;
      }
    }
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes sk-three-bounce {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}