.dcldf-modal {
	.dcldf-modal-body {
		padding: $padding-default ($padding-default * 2);
		overflow: auto;
		max-height: 70vh;

		.dcldf-table {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: ($padding-default / 2);

			.dcldf-table-header,
			.dcldf-table-row {
				display: grid;
				grid-template-columns: minmax(160px, 1.2fr) minmax(140px, 1fr) minmax(220px, 1.6fr) 24px;
				gap: ($padding-default / 2);
			}

			.dcldf-table-header {
				align-items: start;
				font-weight: 600;
				color: $text-color-default;
				padding-bottom: ($padding-default / 3);
				border-bottom: 1px solid $modal-border-color;
			}

			.dcldf-table-row {
				// Keep property/operator/value controls on one baseline when MultiSelect chips grow above the value picker
				align-items: end;
				padding: ($padding-default / 3) 0;
				border-bottom: 1px solid rgba($modal-border-color, 0.5);

				.form-group {
					margin-bottom: 0;
				}

				.dcldf-column-actions {
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					min-height: 40px;

					.dcldf-remove-filter-button {
						// padding: 0;
						// min-width: 32px;
						// height: 32px;
						// line-height: 1;

						// svg {
						// 	width: 18px;
						// 	height: 18px;
						// }
						@include button-rounded-with-icon;
						margin-bottom: 10px;
					}
				}

				.dcldf-multiselect-value-editor {
					display: flex;
					flex-direction: column;
					gap: ($padding-default / 3);

					.dcldf-value-chips {
						display: flex;
						flex-wrap: wrap;
						gap: ($padding-default / 4);

						.dcldf-value-chip {
							display: inline-flex;
							align-items: center;
							gap: ($padding-default / 4);
							padding: 2px 8px;
							border-radius: 12px;
							background: $modal-label-background;
							border: 1px solid $modal-border-color;
							font-size: 12px;
							cursor: pointer;
							line-height: 1.4;
							color: inherit;

							&:hover {
								border-color: $color-primary;
							}

							.dcldf-remove-value-button {
								border: 0;
								background: transparent;
								padding: 0;
								line-height: 1;
								font-size: 14px;
								pointer-events: none;
							}
						}
					}

					.dcldf-select-type-dropdown,
					.dcldf-select-type-dropdown-tree,
					.dcldf-select-type-popup {
						width: 100%;
					}

					.dbqstsd-container {
						width: 100%;

						.dbqstsd-output-button {
							width: 100%;
						}
					}
				}
			}
		}
	}

	.modal-footer {
		display: flex;
		align-items: center;
		gap: ($padding-default / 2);
		padding: $padding-default;
		border-top: 1px solid $modal-border-color;

		.btn-link {
			cursor: pointer;

			&:hover {
				color: $color-primary;
			}
		}

		.btn[data-button-type="2"] {
			margin-left: auto;
		}
	}

	.dcldf-value-invalid {
		.form-control,
		.dbqstsd-output-button,
		.dcldf-select-type-dropdown,
		.dcldf-select-type-dropdown-tree,
		.dcldf-select-type-popup,
		.dbqstd-output-button,
		.dbqstp-output-button {
			border-color: $modal-error-border !important;
		}

		input.form-control,
		select.form-control {
			border-bottom-color: $modal-error-border !important;
		}
	}
}