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

$tc-list-table-cell-padding: $padding-small !default;

.tc-list-table-right-action {
	position: absolute;
	right: 0;
	margin-top: tokens.$coral-spacing-xxs;
	margin-right: tokens.$coral-spacing-s;
}

.tc-list-table {
	background-color: tokens.$coral-color-neutral-background;

	.row {
		border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
		background: tokens.$coral-color-neutral-background;
		display: flex;
		align-items: center;

		&:hover,
		&:focus,
		&:focus-within {
			background-color: tokens.$coral-color-neutral-background-medium;

			.cell {
				border-right: 1px solid tokens.$coral-color-neutral-border-weak;
			}
		}
	}

	&.right-action .tc-list-headerRow > *:last-child {
		padding-right: tokens.$coral-spacing-l;
	}

	.tc-list-headerRow {
		box-shadow: $shadow-default;

		.header {
			color: tokens.$coral-color-neutral-text;
			display: inline-flex;
			font-size: 0.75rem;
			font-weight: 600;
			padding: $tc-list-table-cell-padding;
			overflow: hidden;

			:global(.ReactVirtualized__Table__headerTruncatedText) {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			:global(.ReactVirtualized__Table__sortableHeaderIcon) {
				flex-shrink: 0;
			}
		}
	}

	:global(.ReactVirtualized__Table__sortableHeaderColumn) {
		cursor: pointer;
	}

	.grid {
		box-shadow: $shadow-default;

		.cell {
			border-right: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding: 0 $tc-list-table-cell-padding;

			height: 100%;
			display: flex;
			align-items: center;
			// selection's checkbox has no "name" attribute, so "tc-list-cell-" refer to this cell
			&:global(.tc-list-cell-),
			&:last-child {
				border-right: none;
			}
		}
	}

	[class*='tc-list-cell-'] {
		flex: 1 1 100%;
	}
}