.sui-prj-pipeline-connectors {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  &__line {
    stroke-width: rem(2);
    stroke: $sui-color-brand-denim-500;
    fill: none;

    &.as--requested,
    &.as--queued,
    &.as--running,
    &.as--stopping {
      stroke-dasharray: rem(2) rem(5);
      stroke-linecap: round;
      animation: sui-prj-pipeline-connectors--runnning 60s linear infinite;
    }

    &.as--awaiting {
      stroke: $sui-prj-color-status-awaiting-light;
    }

    &.as--requested {
      stroke: $sui-prj-color-status-requested;
    }

    &.as--queued {
      stroke: $sui-prj-color-status-queued;
    }

    &.as--running {
      stroke: $sui-prj-color-status-running;
    }

    &.as--succeeded {
      stroke: $sui-prj-color-status-succeeded;
    }

    &.as--stopping {
      stroke: $sui-prj-color-status-stopping;
    }

    &.as--stopped {
      stroke: $sui-prj-color-status-stopped;
    }

    &.as--failed {
      stroke: $sui-prj-color-status-failed-light;
    }

    &.as--skipped {
      stroke: $sui-prj-color-status-skipped;
    }

    &.as--out_of_memory {
      stroke: $sui-prj-color-status-out-of-memory;
    }
  }
}

@keyframes sui-prj-pipeline-connectors--runnning {
  to {
    stroke-dashoffset: -1000;
  }
}