@mixin prjInstanceColor ($status-color, $isOngoing: false) {
  color: $status-color;
  background-color: $status-color;

  @if $isOngoing == true {
    &::before {
      content: '';
      display: block;
      position: absolute;
      background-color: currentColor;
      width: rem(6);
      height: rem(6);
      border-radius: rem(6);
      animation: popStatusDot 2s ease infinite;
    }
  }
}

%prjInstanceStatus {
  &.as--awaiting {
    z-index: 1;

    @include prjInstanceColor($sui-prj-color-status-awaiting-light);
  }

  &.as--unknown {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-awaiting-light);
  }

  &.as--requested {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-requested-light);
  }

  &.as--queued {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-queued-light);
  }

  &.as--running {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-running-light);
  }

  &.as--succeeded {
    z-index: 4;

    @include prjInstanceColor($sui-prj-color-status-succeeded-light);
  }

  &.as--stopping {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-stopping-light);
  }

  &.as--stopped {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-stopped-light);
  }

  &.as--failed {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-failed-light);
  }

  &.as--skipped {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-skipped-light);
  }
}

%prjInstanceDotStatus {
  &.as--awaiting {
    z-index: 1;

    @include prjInstanceColor($sui-prj-color-status-awaiting-dark);
  }

  &.as--unknown {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-awaiting-dark);
  }

  &.as--requested {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-requested-dark, $isOngoing: true);
  }

  &.as--queued {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-queued-dark, $isOngoing: true);
  }

  &.as--running {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-running-dark, $isOngoing: true);
  }

  &.as--succeeded {
    z-index: 4;

    @include prjInstanceColor($sui-prj-color-status-succeeded-dark);
  }

  &.as--stopping {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-stopping-dark, $isOngoing: true);
  }

  &.as--stopped {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-stopped-dark);
  }

  &.as--failed {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-failed-dark);
  }

  &.as--skipped {
    z-index: 3;

    @include prjInstanceColor($sui-prj-color-status-skipped-dark);
  }
}
