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

$marker-stroke-width: 1;
$marker-stroke-width-highlight: 2;
$tooltip-background-opacity: 0.9;
$tooltip-stroke-width: 1;
$tooltip-value-text-size: 27px;

// Tooltip Container
.britechart-tooltip {
    font-size: vars.$text-size-medium;
}

.britechart-mini-tooltip {
    font-size: vars.$text-size-large;
}

// Vertical Marker Container
.vertical-marker-container {
    .vertical-marker {
        fill: none;
        stroke: vars.$grey-300;
        stroke-width: $marker-stroke-width;
    }

    .data-point-highlighter {
        fill: vars.$white;
        stroke-width: $marker-stroke-width-highlight;
    }
}

// Tooltip
.tooltip-background {
    fill: rgba(vars.$white, $tooltip-background-opacity);
    stroke: vars.$grey-300;
    stroke-width: $tooltip-stroke-width;
}