.section-sync {
  background: $color-white;
}

.publish-button-animation {
  animation: publish-button-flash 12s infinite;
  background: $color-brand;
  border-radius: 3px;
  height: 4%;
  position: absolute;
  right: 3%;
  top: 3%;
  width: 8%;
}

.git-push-animation {
  position: absolute;
  right: 1.4%;
  top: 5%;

  .commit {
    animation: commit-movement 12s infinite;
    background: $color-dark;
    border-radius: 3px;
    color: $color-white;
    font-size: 50%;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transform-origin: center;
  }
}

@keyframes publish-button-flash {
  0% {
    background: $color-brand;
    transform: scale(1);
  }

  19% {
    background: $color-brand;
    transform: scale(1);
  }

  21% {
    background: $color-brand-light;
    transform: scale(1.2);
  }

  23% {
    background: $color-brand;
    transform: scale(1);
  }

  100% {
    background: $color-brand;
    transform: scale(1);
  }
}

@keyframes commit-movement {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
    filter: blur(0);
    opacity: 0;
    transform: translateY(0) scale(0);
  }

  20% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
    filter: blur(0);
    opacity: 0;
    transform: translateY(0) scale(0);
  }

  50% {
    box-shadow: 0 6px 20px -2px rgba(0, 0, 0, 0.15);
    filter: blur(0);
    opacity: 1;
    transform: translateY(40%) scale(1);
  }

  70% {
    opacity: 0;
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
    filter: blur(20px);
    opacity: 0;
    transform: translateY(120%) scale(0.2);
  }
}
