@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

$tc-layout-skeleton-width: 6rem !default;
$tc-layout-skeleton-height: 6rem !default;

.tc-twoviewers-layout {
	display: flex;
	width: 100%;
	overflow: hidden;

	&-loading {
		display: flex;
		align-items: center;
		justify-content: center;

		:global(.tc-svg-icon) {
			width: $tc-layout-skeleton-width;
			height: $tc-layout-skeleton-height;
		}
	}

	&-left,
	&-right {
		background-color: tokens.$coral-color-neutral-background-medium;
	}

	&-left {
		border-right: 0.3125rem solid tokens.$coral-color-neutral-border-weak;
		width: 29.375rem;
	}

	&-right {
		flex-grow: 1;
	}
}

:global(.button-padding) {
	margin-top: $padding-normal;
	margin-right: $padding-small;
}

.custom-quality-bar-line {
	background-color: blue;
}

.custom-quality-bar-line2 {
	background-color: pink;
}