@base00: #1e1d1d;
@base01: #2a2929;
@base02: #3d3c3c;
@base03: #504b4b;
@base04: #868585;
@base05: #e6e7e8;
@base06: #f5f5f5;
@base07: #ecf0f1; /* light grey (pending) */
@base08: #e74c3c; /* red */
@base09: #e67e22; /* orange */
@base0A: #f1c40f; /* yellow */
@base0B: #2ecc71; /* green */
@base0C: #1abc9c; /* cyan */
@base0D: #3498db; /* blue */
@base0E: #9b59b6; /* purple */
@base0F: #8f4b2d; /* brown */
@base0G: #3d4a58; /* 17 color palettes are 1 better than 16 */

@white: #fff;
@amber-primary: #f5a623;
@amber-secondary: #d58808;
@blue-primary: #4a90e2;
@blue-secondary: #2d76cc;
@brown-primary: #8b572a;
@brown-secondary: #6a401c;
@grey-primary: #9b9b9b;
@grey-secondary: #7a7373;
@green-primary: #11c560;
@green-secondary: #419867;
@red-primary: #ed4b35;
@red-secondary: #bd3826;

.pipeline-svg {
  display: block;
  font-family: 'Iosevka', monospace;
  letter-spacing: .0425em;
  font-weight: bold;
  font-size: 12px;
  line-height: 1.4;
  background: @base02;
  flex-grow: 1;
  justify-self: stretch;
  padding: 32px;

  .node rect { fill: @base00; }
  .node text { fill: white; }
  .node.pending rect { fill: @grey-primary; }
  .node.succeeded rect { fill: @green-primary; }
  .node.failed rect { fill: @red-primary; }
  .node.errored rect { fill: @amber-primary; }
  .node.aborted rect { fill: @brown-primary; }
  .node.failing rect { fill: @amber-primary; }
  .node.paused rect { fill: @blue-primary; }
  .node.job.no-builds rect { fill: @grey-primary; }
  .node.resource a { color: @base06; }
  .node.pinned rect { fill: #5C3BD1; }
  .node.constrained-input.pinned {
    rect {
      fill: #5C3BD1;
      opacity: 0.8;
    }

    image {
      opacity: 0.7;
    }
  }

  .edge { stroke: @grey-secondary; }
  .edge.pending { stroke: @base04; }
  .edge.succeeded { stroke: @green-primary; }
  .edge.failed { stroke: @red-primary; }
  .edge.errored { stroke: @amber-primary; }
  .edge.aborted { stroke: @brown-primary; }
  .edge.paused { stroke: @blue-primary; }
  .edge.trigger-false { stroke-dasharray: 5, 5; }

  .node a {
    cursor: pointer;
  }

  .node rect {
    shape-rendering: crispEdges;
  }

  .edge path {
    stroke-width: 2px;
    fill: none;
  }

  .node text {
    fill: #fff;
  }

  .node.constrained-input {
    text {
      fill: @base04;
    }

    &.pinned {
      text {
        fill: #fff;
        opacity: 0.7;
      }
    }
  }

  .active path {
    stroke-width: 4px;
  }

  .active.node rect {
    filter: url(#embiggen);
  }

  .active.node image {
    transform: scale(1.09) translate(-5px, -1px);
  }

  .active.node text {
    font-size: 1.06em;
  }

  .active.node use {
    transform: scale(1.09) translate(-5px, -1px);
  }
}
