@use '@talend/design-tokens/lib/tokens' as tokens;

.tf-array-item {
	display: flex;
	column-gap: tokens.$coral-spacing-s;
	background: tokens.$coral-color-neutral-background-medium;
	padding: tokens.$coral-spacing-xs 0;

	.delete button,
	.control button {
		opacity: 0;
	}

	&:hover {
		background: tokens.$coral-color-neutral-background;

		.control button,
		.delete button {
			opacity: 1;

			&:disabled {
				color: tokens.$coral-color-neutral-text-disabled;
			}
		}
	}

	> * {
		flex-grow: 1;
		margin: 0;
	}

	.control {
		flex-grow: 0;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.delete {
		flex-grow: 0;
		flex-shrink: 0;
		display: flex;
		align-items: center;
	}
}