@import (reference) '../variables.less';

@animationDuration: 1300;
@animationDelay: 500;
@animationIterationCount: 2;

.root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: @gray-5;
  color: @white;
  transition: @transition-speed-slow;
}

.hideSplash {
  opacity: 0;
  pointer-events: none;
}

.trace > svg > path {
  @dash-size: 1000;
  @keyframes trace {
    0%,
    100% {
      opacity: 0;
    }
    20%,
    80% {
      opacity: 1;
    }
    50%,
    100% {
      stroke-dashoffset: 0;
    }
  }

  stroke-dasharray: @dash-size;
  stroke-dashoffset: @dash-size;
  animation-name: trace;
  animation-duration: unit(@animationDuration, ms);
  animation-delay: unit(@animationDelay, ms);
  animation-direction: forwards;
  animation-timing-function: ease-in;
  animation-iteration-count: @animationIterationCount;
  animation-fill-mode: forwards;
}

.size {
  margin: 0 auto;
  width: 40vw;
  max-width: 200px;
}