/* === Graph body animation === */

.graph-bodies {
  display: grid;
}

.graph-body {
  /* Keep bodies overlapping (for animation)  */
  grid-column: 1;
  grid-row: 1;

  &.active {
    opacity: 0;
    animation: body-appear 200ms forwards ease-out;
    animation-delay: 210ms;
  }
  &:not(.active) {
    animation: body-disappear 200ms forwards ease-out;
  }
}

.graph-body[hidden] {
  display: none !important;
}

.graph-layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.graph-layout--no-graph {
  padding-top: 0 !important;
}

@keyframes body-appear {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes body-disappear {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
  }
}