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

$tc-list-title-icon-size: $svg-rg-size !default;

.tc-list-title {
	display: flex;
	align-items: center;
	position: relative;
	height: 100%;

	.icon,
	.span > .icon {
		filter: url('#talend-grayscale');
		flex-shrink: 0;
		height: $tc-list-title-icon-size;
		width: $tc-list-title-icon-size;
		vertical-align: middle;
	}

	.icon + .edit-form,
	span + .edit-form {
		padding-left: $padding-normal;
	}

	.edit-form {
		flex-grow: 1;
		height: 100%;

		> input {
			width: 100%;
			height: 100%;
		}
	}

	.main-title {
		flex-grow: 1;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;

		padding: 0 $padding-normal;

		color: tokens.$coral-color-neutral-text;
		font-size: inherit;
		font-weight: 600;
		text-transform: none;
		text-align: left;

		> span {
			display: inline;
		}

		&:first-child {
			padding-left: 0;
		}

		&:hover,
		&:focus {
			text-decoration: none;
		}
	}
}

.tc-list-title-filter {
	&:not(.tc-list-title-disabled) {
		&:hover,
		&:focus-within {
			.icon {
				color: tokens.$coral-color-accent-text;
				filter: none;
			}

			.main-title {
				color: tokens.$coral-color-accent-text;
			}
		}
	}
}

// manage actions display on row hover
:global(.tc-list-large-inner-box),
:global(.ReactVirtualized__Table__row) {
	&:hover,
	&:focus,
	&:focus-within {
		:global(.tc-list-title .cell-title-actions) {
			opacity: 1;
			width: 100%;
			transition: opacity 0.15s ease-in;
			overflow: visible;
		}
	}
}

:global(.tc-list-large-row.active .tc-list-large-inner-box),
:global(.ReactVirtualized__Table__row.active) {
	&:hover,
	&:focus,
	&:focus-within {
		:global(.tc-list-title .cell-title-actions) {
			// background: linear-gradient(90deg, tokens.$coral-color-neutral-background, tokens.$coral-color-accent-background $padding-large);
		}
	}
}

:global(.tc-list-large-row.selected .tc-list-large-inner-box),
:global(.ReactVirtualized__Table__row.selected) {
	&:hover,
	&:focus,
	&:focus-within {
		:global(.tc-list-title .cell-title-actions) {
			// background: linear-gradient(90deg, tokens.$coral-color-neutral-background, tokens.$coral-color-accent-background $padding-large);
		}
	}
}

// START : hack to allow actions dropdown to display
// there are important to override some inline styles injected by react-virtualized... sorry !
// sass-lint:disable no-important
:global(.ReactVirtualized__Grid__innerScrollContainer),
:global(.ReactVirtualized__Table__row) {
	&:hover,
	&:focus,
	&:focus-within {
		overflow: visible !important;

		:global(.tc-list-title-cell),
		:global(.tc-list-title-cell) :global(.tc-actions.btn-group) {
			overflow: visible !important;
		}
	}
}

:global(.ReactVirtualized__Table__row) {
	&:hover,
	&:focus,
	&:focus-within {
		/* avoid scrolling over x axis */
		width: auto !important;
		right: 0 !important;
		padding: 0 !important;
	}
}

:global(.tc-list-title-cell) {
	display: flex;
	min-width: 0;
	line-height: $btn-line-height;

	> *:first-child {
		min-width: 0;
		flex: 1;
	}
}

// sass-lint:enable no-important
// END : hack to allow actions dropdown to display