.epitaxy-agent-cell {
  border: 1px solid transparent;
  background-color: transparent;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    opacity 0.16s ease,
    filter 0.16s ease;
}
.epitaxy-agent-cell:hover {
  filter: brightness(0.9);
}
[data-mode="dark"] .epitaxy-agent-cell:hover {
  filter: brightness(1.1);
}
.epitaxy-agent-cell--done {
  background-color: var(--t4);
}
[data-mode="dark"] .epitaxy-agent-cell--done {
  background-color: var(--t5);
}
.epitaxy-agent-cell--running {
  background-color: var(--accent);
  animation: epitaxy-agent-pulse var(--epitaxy-pulse-dur, 2.8s) ease-in-out
    var(--epitaxy-pulse-delay, 0s) infinite;
}
.epitaxy-agent-cell--stalled {
  background-color: var(--extended-yellow);
}
.epitaxy-agent-cell--error {
  background-color: var(--extended-pink);
}
.epitaxy-agent-cell--pending {
  border-color: var(--t5);
}
.epitaxy-agent-cell--ghost {
  border-color: var(--t5);
  animation: epitaxy-agent-ghost-pulse 2.2s ease-in-out infinite;
}
@keyframes epitaxy-agent-pulse {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}
@keyframes epitaxy-agent-ghost-pulse {
  0%,
  to {
    opacity: 0.25;
  }
  50% {
    opacity: 0.9;
  }
}
@media (prefers-reduced-motion: reduce) {
  .epitaxy-agent-cell {
    transition: none;
  }
  .epitaxy-agent-cell--running {
    animation: none;
  }
  .epitaxy-agent-cell--ghost {
    animation: none;
    opacity: 0.45;
  }
}