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

$tc-listview-height: 40vh !default;

$row-height: 12px;
$row-vertical-margin: $padding-small;
$row-nested-inner-margin-top: $padding-normal - $padding-small;
$row-nested-inner-margin-bottom: $padding-larger - $padding-small;

.tc-listview-items {
	min-height: 0;
	list-style: none;
	box-shadow: inset 0 21px 3px -20px $shadow, inset 0 -21px 3px -20px $shadow;
	height: $tc-listview-height;
	background-color: rgba(0, 0, 0, 0.025);

	.tc-item-container {
		margin: 0;

		:global {
			.checkbox {
				margin: $padding-smaller;
				margin-right: 0;
			}

			.with-icon {
				display: inline-flex;
				margin: 0;
				margin-left: $padding-smaller;

				.tc-svg-icon {
					height: $row-height;
					width: $row-height;
					margin-left: $padding-smaller;
				}
			}

			.checkbox-nested {
				margin-top: $row-nested-inner-margin-top;
				margin-bottom: $row-nested-inner-margin-bottom;
			}

			.checkbox-nested > .checkbox {
				height: $row-height;
				margin-bottom: 0;

				+ .checkbox {
					margin-top: $row-vertical-margin;
				}
			}
		}

		&.toggle {
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		}
	}
}

// This exported values are used to compute properly sizes
// in react-virtualized's calculation method
:export {
	// stylelint-disable property-no-unknown
	row-height: $row-height;
	row-vertical-margin: $row-vertical-margin;
	row-nested-inner-margin-top: $row-nested-inner-margin-top;
	row-nested-inner-margin-bottom: $row-nested-inner-margin-bottom;
	// stylelint-enable property-no-unknown
}