@import '~styles/mixins';

.Loader {
  @include vm;
  text-align: center;
  @include absolute-fill;
  position: fixed;
  z-index: 1000;
  transition: opacity 400ms;
  opacity: 0;
  height: 100vh;

  .background {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.6;
    width: 100%;
    height: 100%;
    background: #fff;

    &.dark {
      background: $color_dark_loader_background;
      opacity: 0.6;
    }
  }

  .loading {
    position: relative;
    width: 50px;
    font-weight: bold;
    &.children {
      width: auto;
    }
  }

  @include customAppearTransition('fade') {
    opacity: 1;
  }
}
