$queued: $grey-lighter;
$starting: $grey-lighter;
$running: $primary;
$complete: $nomad-green-dark;
$failed: $danger;
$lost: $dark;

.chart {
  .queued {
    fill: $queued;
  }

  .starting,
  .pending {
    .layer-0 {
      fill: $starting;
    }

    .layer-1 {
      fill: url(#diagonal-stripe-3);
      fill-opacity: 0.2;
    }
  }

  .running {
    fill: $running;
  }

  .complete {
    fill: $complete;
  }

  .failed {
    fill: $failed;
  }

  .lost {
    fill: $lost;
  }
}

.color-swatch {
  display: inline-block;
  height: 1rem;
  width: 1rem;
  margin-right: 0.25rem;
  vertical-align: middle;
  border-radius: $radius;

  $color-sequence: $orange, $yellow, $green, $turquoise, $blue, $purple, $red;
  @for $i from 1 through length($color-sequence) {
    &.swatch-#{$i - 1} {
      background: nth($color-sequence, $i);
    }
  }

  &.queued {
    box-shadow: inset 0 0 0 1px rgba($black, 0.3);
    background: $queued;
  }

  &.starting,
  &.pending {
    background: repeating-linear-gradient(
      -45deg,
      $starting,
      $starting 3px,
      darken($starting, 25%) 3px,
      darken($starting, 25%) 6px
    );
  }

  &.running {
    background: $running;
  }

  &.complete {
    background: $complete;
  }

  &.failed {
    background: $failed;
  }

  &.lost {
    background: $lost;
  }
}
