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

.row {
	padding-left: $padding-normal;

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

	:global(.checkbox) {
		margin: 0;
	}

	label {
		height: 1.875rem;
		width: 100%;
		display: flex;
		margin-bottom: 0;
		align-items: center;
	}

	input[type='checkbox'],
	:global(.checkbox input + ::before) {
		top: calc($padding-normal / 2);
	}

	:global(.checkbox input + ::after) {
		/* tricky calculation to center the checkmark
		 * $padding-normal / 2 = top gap, same as the input (see above)
		 * tokens.$coral-sizing-xxxs = checkbox size
		 * tokens.$coral-sizing-xxxs / 2 = mark size
		 * 2px = 2 * 1px (the border width)
		 */
		top: calc($padding-normal / 2 + (tokens.$coral-sizing-xxxs - tokens.$coral-sizing-xxxs / 2 - 2px) / 2) !important; /* stylelint-disable-line declaration-no-important */
	}
}

.item {
	color: tokens.$coral-color-neutral-text;

	&[for='checkbox-create-new'],
	&[for='checkbox-select-all'] {
		font-style: italic;
	}
}

:global(.tc-multi-select-item) {
	display: flex;
	align-items: center;
}