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

$module: line-chart;

.container {
	:global(.recharts-cartesian-axis-line) {
		stroke: tokens.$coral-color-neutral-text;
	}

	:global(.recharts-text) {
		fill: tokens.$coral-color-neutral-text;
	}
}

.#{$module} {
	&-custom-tooltip {
		list-style: none;
		margin: 0;
		padding: 0;

		&__line-item--inactive {
			opacity: tokens.$coral-opacity-s;
		}

		&__line-value {
			font: tokens.$coral-paragraph-m-bold;
			margin-left: tokens.$coral-spacing-xxs;
		}
	}

	&-custom-legend {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: tokens.$coral-spacing-m;
		list-style: none;

		&-item {
			display: flex;
			align-items: center;
			padding: tokens.$coral-spacing-xxs;
			border-radius: tokens.$coral-radius-s;
		}

		&--align-left {
			justify-content: flex-start;
		}

		&--align-center {
			justify-content: center;
		}

		&--align-right {
			justify-content: flex-end;
		}

		&--shift-left {
			padding-right: 3.75rem;
		}

		&__button--selection-enabled:hover {
			background-color: tokens.$coral-color-accent-background-hover;
		}

		&__button--selected {
			background-color: tokens.$coral-color-accent-background-selected;

			&:hover {
				background-color: tokens.$coral-color-accent-background-selected;
			}
		}

		&__button--inactive {
			opacity: tokens.$coral-opacity-s;
		}

		&__line-label {
			font: tokens.$coral-paragraph-s;
			font-style: normal;
			color: tokens.$coral-color-neutral-text-weak;
		}
	}

	&-line-icon {
		display: inline-block;
		width: 16px;
		height: 2px;
		margin-right: tokens.$coral-spacing-xs;
		border-radius: tokens.$coral-radius-round;
	}
}