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

$text-padding: 12px;
$tick-size: 1;

.tick {
    line {
        fill: none;
        shape-rendering: crispedges;
        stroke: theme.color("axis");
        stroke-width: $tick-size;
    }

    text {
        fill: theme.color("text-muted");
        font-size: vars.$text-size-small;
        padding: $text-padding;
    }
}

.y-axis-label,
.x-axis-label {
    fill: theme.color("text-subtle");
    font-size: vars.$text-size-medium;
}