.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 10px;
  @include size(2rem);
  background: none;
  transform: translate(-50%, -50%) rotate(45deg);

  .arrow {
    position: absolute;
    top: 0;
    left: 0;
    @include size(100%);
    display: block;
    border: none;
    border-right: 2px solid color('white');
    border-bottom: 2px solid color('white');
    animation: scroll-animation 2s linear infinite;

    &:nth-child(1) {
      top: -20px;
      left: -20px;
      animation-delay: 0s;
    }

    &:nth-child(2) {
      top: -10px;
      left: -10px;
      animation-delay: 0.4s;
    }

    &:nth-child(3) {
      top: 0;
      left: 0;
      animation-delay: 0.8s;
    }
  }
}