$queued: $grey-lighter;
$starting: $grey-lighter;
$running: $primary;
$complete: $nomad-green-dark;
$failed: $danger;
$lost: $dark;
$not-scheduled: $blue-200;
$degraded: $warning;
$blocked: $danger;
$canceled: $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;
  }

  .not-scheduled {
    fill: $not-scheduled;
  }

  .degraded {
    fill: $degraded;
  }

  .unknown {
    fill: $unknown;
  }
}

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

  &.is-wide {
    width: 2rem;
  }

  $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);
    }
  }

  @each $name, $scale in $chart-scales {
    &.swatch-#{$name} {
      background: nth($scale, -1);
    }

    @each $color in $scale {
      &.swatch-#{$name}-#{index($scale, $color)} {
        background: $color;
      }
    }
  }

  &.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;
  }

  &.unknown {
    background: $unknown;
  }

  &.not-scheduled {
    background: $not-scheduled;
  }

  &.degraded {
    background: $degraded;
  }

  &.canceled {
    background: $canceled;
  }

  &.blocked {
    background: $blocked;
  }

  @each $name, $pair in $colors {
    $color: nth($pair, 1);

    &.is-#{$name} {
      background: $color;
    }
  }
}
