@use "../helpers/variables" as vars;
@use "../helpers/theme";

$line-width: 2;
$text-size: 0.75rem;

.line-chart {
    // Class for data point markers
    .data-point-mark {
        fill: theme.color("surface");
    }

    // Lines
    .topic .line {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: $line-width;
    }

    // Axes
    .x-axis-group path,
    .y-axis-group path {
        display: none;
    }

    .custom-line {
        shape-rendering: crispedges;
        stroke-width: 1;
    }

    .custom-line-annotation {
        fill: theme.color("text-muted");
        font-size: $text-size;
        line-height: $text-size;
    }

    // This is the div that we use to simulate a line drawing animation
    // It has to match what is behind the chart: the background token
    .masking-rectangle {
        fill: theme.color("background");
    }
}