@use '@talend/design-tokens/lib/tokens' as tokens;

$pattern-bar-primary-color: tokens.$coral-color-charts-warning-weak;
$pattern-bar-secondary-color: tokens.$coral-color-charts-warning-strong;

$value-bar-primary-color: tokens.$coral-color-charts-default-weak;
$value-bar-secondary-color: tokens.$coral-color-charts-default-strong;

$grey-bar-color: tokens.$coral-color-charts-neutral-weak;

@mixin override-recharts-styles() {
	// We can't use custom classname on axis
	:global {
		.recharts-responsive-container {
			overflow: visible;
		}

		.recharts-xAxis,
		.recharts-yAxis {
			text {
				font-size: 0.75rem;
				fill: tokens.$coral-color-neutral-text;
			}

			line {
				stroke: tokens.$coral-color-neutral-text;
			}
		}

		.recharts-tooltip-wrapper {
			z-index: 999;
		}
	}
}