/* stylelint-disable declaration-no-important */
@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

$hightlight-height: 1.375rem !default;
$records-node-height: $hightlight-height !default;
$border-size: 0.0625rem;

@mixin selection($backgroundColor) {
	background: $backgroundColor;
	bottom: 0;
	content: ' ';
	left: -100%;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

.tc-records-viewer {
	display: flex;
	flex-direction: column;
	background: tokens.$coral-color-neutral-background-medium;
	height: 100%;

	&-tree {
		// We need to override an overflow hidden in the virtualized grid.
		// Unfortunetely there is no way to change it by props, so we use the important...
		// A issue will be open on react-virtualized soon.
		:global(.ReactVirtualized__Grid__innerScrollContainer) {
			overflow: initial !important;
		}

		:global(.tc-svg-icon) {
			height: 0.75rem;
			width: 0.75rem;
			margin: 0;
			vertical-align: baseline;
		}

		&-border {
			border-bottom: $border-size solid $alto;
		}
	}

	&-skeleton {
		align-items: center;
		display: flex;
		height: $hightlight-height;
		padding: $padding-smaller 0 $padding-smaller $padding-larger;
	}

	&-branch,
	&-leaf {
		display: flex;
		margin-left: $padding-larger;
		position: relative;
	}

	&-leaf {
		justify-content: flex-start;
		align-items: baseline;

		&-highlighted {
			&::before {
				@include selection(tokens.$coral-color-accent-background);
			}
		}

		/* stylelint-disable-next-line order/order */
		min-height: $records-node-height;

		&-quality {
			display: inline-flex;
			margin-left: -$padding-larger;
			height: $hightlight-height;
			left: 0;
			position: absolute;
		}
	}

	&-branch {
		flex-direction: column;
		justify-content: center;
		margin-left: 12px;

		&-highlighted::before {
			@include selection(tokens.$coral-color-accent-background);
		}

		&-content {
			position: relative;
			align-items: center;
			display: inline-flex;
			height: $records-node-height;

			:global(.tc-length-badge) {
				margin-left: 10px;
			}

			&:hover {
				&::before {
					@include selection(tokens.$coral-color-neutral-background-strong);
				}

				:global(.tc-records-viewer-branch-icon) {
					color: tokens.$coral-color-accent-text;
				}

				:global(.tc-tree-branch-icon-caret) {
					color: tokens.$coral-color-accent-text;
				}

				:global(.tc-length-badge) {
					color: tokens.$coral-color-accent-text;
					background-color: tokens.$coral-color-neutral-background;
				}
			}
		}

		&-icon {
			color: tokens.$coral-color-accent-text;
			height: $svg-sm-size;
			width: $svg-sm-size;
		}

		&-quality {
			display: inline-flex;
			margin-left: $padding-small;
			z-index: 1;

			&:focus,
			&:hover {
				&::before {
					@include selection(tokens.$coral-color-neutral-background-strong);
					pointer-events: none;
				}
			}
		}
	}
}

@mixin chevron($color) {
	border: 1px solid tokens.$coral-color-accent-border;
	padding: 2px;
	border-radius: 10px;
	color: $color;
}

.tc-leaf-overflow-icon {
	position: absolute;
	left: -1.0625rem;
	margin-right: $padding-smaller;

	&-chevron {
		padding: 0;
		line-height: initial;
		min-height: initial;

		svg {
			@include chevron(tokens.$coral-color-accent-text);
		}

		&-filled {
			svg {
				@include chevron(tokens.$coral-color-accent-text-weak);
				background-color: tokens.$coral-color-accent-background-strong;
			}
		}
	}

	:global(.tc-svg-anchor) {
		background: transparent;
		border: none;
		padding: 0;
		color: tokens.$coral-color-accent-text;
		display: flex;

		&:focus,
		&:hover {
			color: tokens.$coral-color-accent-text;
		}
	}
}