.process-item.is-button:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: -5px;
  left: 0;
  background-color: var(--swatch--light-3);
  z-index: 10;
  transition: transform 300ms ease;
}

.process-item.is-button::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0rem;
  bottom: 0px;
  left: 5px;
  border-left: 1px dashed var(--swatch--brand-2);
  z-index: 9;
  transition: height 600ms linear(0, 0.012 0.9%, 0.049 2%, 0.409 9.3%, 0.513 11.9%, 0.606 14.7%, 0.691 17.9%, 0.762 21.3%, 0.82 25%, 0.868 29.1%, 0.907 33.6%, 0.937 38.7%, 0.976 51.3%, 0.994 68.8%, 1);

}

.process-item.is-button.is-active::before {
  height: 2rem;
  transition: height 600ms linear(0, 0.012 0.9%, 0.049 2%, 0.409 9.3%, 0.513 11.9%, 0.606 14.7%, 0.691 17.9%, 0.762 21.3%, 0.82 25%, 0.868 29.1%, 0.907 33.6%, 0.937 38.7%, 0.976 51.3%, 0.994 68.8%, 1);
}

.process-item.is-button.is-active .process-pill {
  background-color: color-mix(in srgb, var(--swatch--brand-2) 40%, transparent);

  transform: translateY(-2rem);
  z-index: 10;
  transition: transform 600ms linear(0, 0.012 0.9%, 0.049 2%, 0.409 9.3%, 0.513 11.9%, 0.606 14.7%, 0.691 17.9%, 0.762 21.3%, 0.82 25%, 0.868 29.1%, 0.907 33.6%, 0.937 38.7%, 0.976 51.3%, 0.994 68.8%, 1);

}

.process-item.is-button.is-active::after {

  background-color: var(--swatch--brand-2);
  z-index: 10;
  transform: rotate(-45deg);
  transition: transform 300ms ease;

}

.process-layout::-webkit-scrollbar {
  width: 4px;
  /* thin width */
  height: 4px;
  /* for horizontal scrollbar */
}

.process-layout::-webkit-scrollbar-track {
  background: #232323;
}

.process-layout::-webkit-scrollbar-thumb {
  background: #c5c5c5;
  border-radius: 2px;
}

.process-layout::-webkit-scrollbar-thumb:hover {
  background: #fffb9f;
  /* slightly lighter on hover */
}

/* Firefox */
.process-layout {
  scrollbar-width: thin;
  scrollbar-color: #c5c5c5 #232323;
  /* thumb track */
}