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

$custom-quality-bar-placeholder-line-hover-height: 0.25rem;

.quality-ratio-bar {
	border-radius: 1px;
	height: 100%;
	width: 100%;

	&--empty {
		background-color: tokens.$coral-color-charts-neutral;
	}

	&--valid {
		background-color: tokens.$coral-color-charts-success;
	}

	&--invalid {
		background-color: tokens.$coral-color-charts-danger;
	}

	&--na {
		background-color: tokens.$coral-color-charts-success-weak;
	}

	&--placeholder {
		background-color: tokens.$coral-color-charts-neutral-weak;

		:global(.tc-ratio-bar) &:hover {
			height: $custom-quality-bar-placeholder-line-hover-height;
		}
	}
}

.split-ratio-bar-percentage {
	flex: none;
}