svg.vc-completion-animation {
  animation: global-fade-in-out 4s ease-in-out 1;
  fill: none;
  /* --- Basic merge --- */
  /******* Squash *******/
  /******* Rebase *******/
  /******* Rebase and merge *******/
}

svg.vc-completion-animation .blue {
  fill: rgba(0, 120, 212, 1);
  fill: var(--communication-background,rgba(0, 120, 212, 1));
}

svg.vc-completion-animation .gray {
  stroke: rgba( 166, 166, 166 ,  1 );
  stroke: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
}

svg.vc-completion-animation .sourceLine {
  stroke: rgba(0, 120, 212, 1);
  stroke: var(--communication-background,rgba(0, 120, 212, 1));
  stroke-width: 2px;
}

svg.vc-completion-animation .targetLine {
  stroke: rgba( 166, 166, 166 ,  1 );
  stroke: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
  stroke-width: 2px;
}

svg.vc-completion-animation .sourceLineGhost {
  stroke: rgba( 218, 218, 218 ,  1 );
  stroke: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 );
  stroke-width: 2px;
}

svg.vc-completion-animation .sourceCommit {
  fill: rgba(0, 120, 212, 1);
  fill: var(--communication-background,rgba(0, 120, 212, 1));
  stroke-width: 2px;
}

svg.vc-completion-animation .targetCommit {
  fill: rgba( 166, 166, 166 ,  1 );
  fill: rgba( var(--palette-neutral-30,166, 166, 166) ,  1 );
  stroke-width: 2px;
}

svg.vc-completion-animation .mergeCommit {
  stroke: rgba(0, 120, 212, 1);
  stroke: var(--communication-background,rgba(0, 120, 212, 1));
  stroke-width: 2px;
}

svg.vc-completion-animation .sourceCommitGhost {
  fill: rgba( 218, 218, 218 ,  1 );
  fill: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 );
  stroke-width: 2px;
}

@keyframes global-fade-in-out {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

svg.vc-completion-animation .fade-in-final {
  /* Originally the ghost objects faded in after primary animation; this has been disabled for now
      and we can remove this chole CSS class if it looks like we're keeping this approach. */
  /*animation: fade-in-final 4s ease-in 1;*/
}

@keyframes fade-in-final {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}

svg.vc-completion-animation .fade-in-merge {
  animation: fade-in-merge 4s ease-in-out 1 forwards;
}

svg.vc-completion-animation .grow-right-merge {
  stroke-dasharray: 1000;
  animation: grow-right-merge 4s ease-in-out 1 forwards;
}

@keyframes fade-in-merge {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes grow-right-merge {
  0% {
    stroke-dashoffset: 1000;
  }
  20% {
    stroke-dashoffset: 1000;
  }
  60% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

svg.vc-completion-animation .fade-out-squash1 {
  animation: fade-out-squash1 4s ease-in-out 1 forwards;
}

svg.vc-completion-animation .fade-out-squash2 {
  animation: fade-out-squash2 4s ease-in-out 1 forwards;
}

svg.vc-completion-animation .grow-right-squash {
  stroke-dasharray: 1000;
  animation: grow-right-squash 4s ease-in-out 1 forwards;
}

svg.vc-completion-animation .shrink-right-squash {
  stroke-dasharray: 32;
  animation: shrink-right-squash 4s ease-in-out 1 forwards;
}

svg.vc-completion-animation .slide-right-squash {
  animation: slide-right-squash 4s ease-in-out 1 forwards;
}

@keyframes fade-out-squash1 {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-out-squash2 {
  0% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  36% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes grow-right-squash {
  0% {
    stroke-dashoffset: 1000;
  }
  50% {
    stroke-dashoffset: 1000;
  }
  65% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes shrink-right-squash {
  0% {
    stroke-dashoffset: 0;
  }
  20% {
    stroke-dashoffset: 0;
  }
  35% {
    stroke-dashoffset: -32;
  }
  100% {
    stroke-dashoffset: -32;
  }
}

@keyframes slide-right-squash {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0, 0);
  }
  35% {
    transform: translate(44px, 0);
  }
  50% {
    transform: translate(44px, -16px);
  }
  100% {
    transform: translate(44px, -16px);
  }
}

svg.vc-completion-animation .fade-in-rebase {
  animation: fade-in-rebase 4s ease-in-out 1 forwards;
}

svg.vc-completion-animation .slide-right-rebase {
  animation: slide-right-rebase 4s ease-in-out 1 forwards;
}

svg.vc-completion-animation .fade-out-rebase {
  animation: fade-out-rebase 4s ease-in-out 1 forwards;
}

@keyframes slide-right-rebase {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0, 0);
  }
  40% {
    transform: translate(44px, 0);
  }
  60% {
    transform: translate(44px, -16px);
  }
  100% {
    transform: translate(44px, -16px);
  }
}

@keyframes fade-out-rebase {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  20% {
    transform: translate(0, 0);
    opacity: 1;
  }
  40% {
    transform: translate(44px, 0);
    opacity: 1;
  }
  60% {
    transform: translate(44px, 0);
    opacity: 0;
  }
  100% {
    transform: translate(44px, 0);
    opacity: 0;
  }
}

@keyframes fade-in-rebase {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

svg.vc-completion-animation .slide-right-rebaseMerge {
  animation: slide-right-rebaseMerge 4s ease-in-out 1 forwards;
}

svg.vc-completion-animation .grow-right-rebaseMerge {
  stroke-dasharray: 1000;
  animation: grow-right-rebaseMerge 4s ease-in-out 1 forwards;
}

svg.vc-completion-animation .grow-right-rebaseMerge.sourceLine {
  transform: translate(44px, 0);
}

svg.vc-completion-animation .fade-in-rebaseMerge {
  animation: fade-in-rebaseMerge 4s ease-in-out 1 forwards;
}

@keyframes slide-right-rebaseMerge {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0, 0);
  }
  40% {
    transform: translate(88px, 0);
  }
  100% {
    transform: translate(88px, 0);
  }
}

@keyframes grow-right-rebaseMerge {
  0% {
    stroke-dashoffset: 1000;
  }
  40% {
    stroke-dashoffset: 1000;
  }
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes fade-in-rebaseMerge {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}