$ const {
  trend
} = input;
<svg version="1.1" role="graphics-document" viewBox=component.getViewBox() preserveAspectRatio="none" class="ebay-spark-line">
  <path class=["ebay-spark-line__path", !trend && "ebay-spark-line__path-neutral", trend === "positive" && "ebay-spark-line__path-positive", trend === "negative" && "ebay-spark-line__path-negative"] d=component.getSparkLinePath() role="graphics-symbol" tabindex="-1" vector-effect="non-scaling-stroke"/>
</svg>
style {
    .ebay-spark-line {
        width: 100%;
        height: 100%;
        max-width: 80px;
        max-height: 30px;
        transform: translate3d(0, 0, 0);
    }

    .ebay-spark-line__path {
        fill: none;
        stroke-width: 3px;
        stroke-linecap: round;
    }

    .ebay-spark-line__path-neutral {
        stroke: var(--spark-line-neutral, var(--color-data-viz-line-chart-primary));
    }

    .ebay-spark-line__path-positive {
        stroke: var(--spark-line-positve, var(--color-data-viz-trend-positive));
    }

    .ebay-spark-line__path-negative {
        stroke: var(--spark-line-negative, var(--color-data-viz-trend-negative));
    }
}