@import '~src/assets/scss/base/mixins';

.app-content {
  display: flex;
  overflow-x: overlay;
  overflow-y: hidden;
  width: 100%;

  .preloader {
    align-self: center;
    color: #fff;
    font-size: 2rem;
    margin: 0 auto;
    text-align: center;
    width: 50%;

    .loading-bar {
      display: block;
      animation: move 5s linear infinite;
      background-image:
        -webkit-gradient(
            linear, 0 0, 100% 100%,
            color-stop(.125, rgba(0, 0, 0, .15)), color-stop(.125, transparent),
            color-stop(.250, transparent), color-stop(.250, rgba(0, 0, 0, .10)),
            color-stop(.375, rgba(0, 0, 0, .10)), color-stop(.375, transparent),
            color-stop(.500, transparent), color-stop(.500, rgba(0, 0, 0, .15)),
            color-stop(.625, rgba(0, 0, 0, .15)), color-stop(.625, transparent),
            color-stop(.750, transparent), color-stop(.750, rgba(0, 0, 0, .10)),
            color-stop(.875, rgba(0, 0, 0, .10)), color-stop(.875, transparent),
            to(transparent)
        ),
        -webkit-gradient(
            linear, 0 100%, 100% 0,
            color-stop(.125, rgba(0, 0, 0, .30)), color-stop(.125, transparent),
            color-stop(.250, transparent), color-stop(.250, rgba(0, 0, 0, .25)),
            color-stop(.375, rgba(0, 0, 0, .25)), color-stop(.375, transparent),
            color-stop(.500, transparent), color-stop(.500, rgba(0, 0, 0, .30)),
            color-stop(.625, rgba(0, 0, 0, .30)), color-stop(.625, transparent),
            color-stop(.750, transparent), color-stop(.750, rgba(0, 0, 0, .25)),
            color-stop(.875, rgba(0, 0, 0, .25)), color-stop(.875, transparent),
            to(transparent)
        );
      background-size: 10rem 10rem;
      margin-top: 2rem;
      width: 100%;
      height: 1rem;
    }
  }

  @keyframes move {
    0% {
      background-position: 100% -10rem;
    }
    100% {
      background-position: 100% 10rem;
    }
  }
}
