.nitro-loading {
  position: relative;
  background: $primary;
  z-index: 100;

  .connecting-duck {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    left: 0;
    background: url("@/assets/images/loading/connecting-duck-spritesheet.png") no-repeat top left;
    width: 235px;
    height: 127px;
    animation: 1.5s connecting-duck infinite step-end;
    transform: scale(0.5);
  }

  .nitro-logo {
    width: 47px;
    height: 65px;
    background: transparent url("https://assets.nitrodev.co/logos/react-loader.png") no-repeat center;
    z-index: 1;
  }
}

@keyframes connecting-duck {
  0% {
    background-position: 0 0;
    width: 235px;
    height: 127px;
  }

  15% {
    background-position: 0 -132px;
    width: 280px;
    height: 151px;
  }

  30% {
    background-position: 0 -288px;
    width: 326px;
    height: 174px;
  }

  45% {
    background-position: 0 -467px;
    width: 235px;
    height: 127px;
  }

  60% {
    background-position: 0 -599px;
    width: 280px;
    height: 151px;
  }

  75% {
    background-position: 0 -755px;
    width: 326px;
    height: 174px;
  }

  90% {
    background-position: 0 -934px;
    width: 190px;
    height: 104px;
  }
}
