
.spark-line {
  display: inline-block;
  margin: 1px;

  .spark-dot {
    fill: $accent-two;
  }

  .spark-text {
    font-size: 10px;
    font-family: $text-font-stack;
    stroke: $stroke-text;
  }

  .spark-text-bg {
    @extend .spark-text;

    stroke-width: 3px;
    fill: $stroke-fill;
    stroke: $stroke-color;
  }

  .spark-path {
    stroke: #3879b2;
    stroke-width: 2px;
    fill: none;
  }

  .cpu-path {
    stroke: $success;
  }

  .memory-path {
    stroke: $primary-dark;
  }

  .network-path {
    stroke: $warning;
  }

  .storage-path {
    stroke: $info;
  }

}

.spark-td {
  position: relative;

  .spark-line {
    background-color: $table-bg-accent;
  }

  .spark-br {
    position: absolute;
    bottom: 1px;
    right: 0;
  }

  .spark-bl {
    bottom: 1px;
    left: 0;
    position: absolute;
  }

  .spark-tr {
    position: absolute;
    top: 1px;
    right: 0;
  }

  .spark-tl {
    position: absolute;
    top: 1px;
    left: 0;
  }
}
