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

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

.line-chart {
    // Class for data point markers
    .data-point-mark {
        fill: vars.$white;
    }

    // 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: vars.$grey-600;
        font-size: $text-size;
        line-height: $text-size;
    }

    // This is the div that we use to simulate a line drawing animation
    // NOTE: it should be of the same color of the background of the chart
    .masking-rectangle {
        fill: vars.$white;
    }
}