@import "../../Mixins";
@import "../../Variables";

$primary-color: $loadingOverlay-color;
@import '~loaders.css/src/animations/ball-scale';

.loadingoverlay {

  background: $loadingOverlay-background;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  overflow: hidden;

  z-index: 99999999;

  &.hide {
    opacity: 0;
    width: 0;
    height: 0;
    transition: opacity .5s ease, width 0s .5s, height 0s .5s;
  }
  &.show {
    opacity: 1;
    width: 100%;
    height: 100%;
    transition: opacity .5s ease, width 0s, height 0s;
  }

  .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    @include transform(translate(-50%,-50%))
  }
}
