@import "scss/variables";

.AppLoader {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  width: 100vw;

  .main {
    background: #1BC3F1;
    color: white;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    line-height: 20px;
    height: 250px;
    overflow: hidden;
    padding: 20px;
    width: 440px;

    > div {
      margin-left: -420px;
      opacity: 0;
      transition: margin-left 0.2s ease-out, opacity 0.15s linear;
      width: 400px;

      &.brand {
        font-weight: 600;
      }

      &.logo {
        align-items: center;
        display: flex;
        flex: 1;
        font-size: 42px;
        font-weight: 400;
        justify-content: center;
      }

      &.meta {
        > span {
          display: inline-block;
          width: 50%;

          &:last-child {
            text-align: right;
          }
        }
      }
    }
  }

  &.visible {
    .main {
      > div {
        margin-left: 0px;
        opacity: 1;
      }
    }
  }
}