@import "mixins";
@import "reset";
@import "theme";

@include keyframes(LOADERSPINNER) {
  0% {
    #{$browser}transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    #{$browser}transform: translate(-50%, -50%) rotate(360deg);
  }
}

@include keyframes(LOADERLABEL) {
  0% {
    opacity: 1;
    #{$browser}transform: translate(-50%, -50%) scale(1);
  }
  5% {
    opacity: 0.5;
    #{$browser}transform: translate(-50%, -50%) scale(0.5);
  }
  95% {
    opacity: 0.5;
    #{$browser}transform: translate(-50%, -50%) scale(0.5);
  }
  100% {
    opacity: 1;
    #{$browser}transform: translate(-50%, -50%) scale(1);
  }
}

.loaderoverlay {
  $spinnerBoxSize: 200px;
  $themeColor: #6f3;

  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  color: $themeColor;

  %spinnerBox {
    border: 20px solid rgba(0, 0, 0, 0);
    border-top-color: $themeColor;
    border-bottom-color: $themeColor;
    border-radius: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
  }

  .loaderspinner:before,
  .loaderspinner:after {
    content: "";
  }

  .loaderspinner {
    @extend %spinnerBox;
    @include animation(LOADERSPINNER 5s linear infinite);

    width: $spinnerBoxSize;
    height: $spinnerBoxSize;
  }

  .loaderspinner:before {
    @extend %spinnerBox;
    @include animation(LOADERSPINNER 10s linear infinite);

    width: $spinnerBoxSize * 0.8;
    height: $spinnerBoxSize * 0.8;
  }

  .loaderspinner:after {
    @extend %spinnerBox;
    @include animation(LOADERSPINNER 5s linear infinite);

    width: $spinnerBoxSize * 0.6;
    height: $spinnerBoxSize * 0.6;
  }

  .loaderlabel {
    @include animation(LOADERLABEL 5s linear infinite);

    text-transform: uppercase;
    font-family: sans-serif;
    font-size: $defaultFontSize * 1.375;
    font-weight: 700;
    letter-spacing: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
  }
}

.killAllMessage {
  position: absolute;
  top: 95%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.killAllMessageWrapperHidden {
  display: none;
}
.killAllMessageWrapperShow {
  display: block;
}