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

$drag-element-width: $padding-smaller;

.tc-header-cell-resizable {
	display: flex;
	justify-content: space-between;
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	&-resizing {
		background-color: tokens.$coral-color-accent-background;
	}

	&-truncated-text {
		align-self: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-flex;
	}

	&-drag-button {
		&-handle {
			&-icon {
				min-width: $drag-element-width;
				width: $drag-element-width;
				height: 100%;
				cursor: col-resize;
				opacity: 0;

				&:hover,
				&:active {
					background: tokens.$coral-color-accent-background;
					opacity: 1;
				}
			}
		}
	}
}

.tc-header-cell-resizable-drag-accessibility:focus ~ .tc-header-cell-resizable-drag-button-handle-icon {
	opacity: 1;
	background: tokens.$coral-color-accent-background;
}