//@import "../../../abstracts/abstracts";

.multiple-select-rule-single-tree {
	.dbq-select-type-dropdown-tree {
		ul.dropdown-menu {
			background-color: $modal-input-background;
			border: 0;
			border-radius: 4px;
			-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
			-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);

			min-width: 250px;
			max-height: 300px;
			overflow-y: auto;
			li {
				padding: 0;
				cursor: default;

				.dbqstdt-arrow {
					cursor: pointer;
					font-size: $field-font-size !important;
				}

				a {
					color: $modal-input-color !important;
					text-decoration: none;
					line-height: 20px;
					font-size: $field-font-size;
					&:hover {
						color: $modal-input-color !important;
					}
				}

				// Note from Jeroen @ 22-06-2023
				// When using a dropdown tree in a sidepanel, some styling for dropdown menu's in class lists would set some unwanted hover styling.
				// For now we fix it by overruling it here.. 
				&:hover {
					background: $modal-input-background !important;
				}
			}
			li[data-is-selectable="false"] {
				a {
					cursor: default;
					color: $modal-input-disabled-color !important;
				}
			}
			li[data-is-selectable="true"] {
				a {
					cursor: pointer;
					color: $modal-input-color !important;
					&:hover {
						color: $color-primary !important;
					}
				}
			}
			svg {
				fill: $modal-input-color !important;
				&:hover {
					fill: $color-primary !important;
				}
			}
		}
		button.dropdown-toggle {
			height: $field-height;
			min-height: $field-height;
			svg {
				padding: 5px;
				margin: 0px;
				float: right;
			}
		}
	}
    &[data-value]:not([data-value='']) {
        + .input-group-btn {
            display: block;
			width: 50px !important;
            height: $field-height;
			background-color: $modal-input-background;
			border-radius: 0 0px $border-radius-default 0;
			border: 
            svg {
                padding: 2px 0 !important;
                margin-right: 3px !important;
                margin-left: 3px !important;
            }

			.multiple-select-rule-single-tree-clear {
				width: 100%;
				padding: $select-dropdown-button-padding 13px;
				margin-left: 0 !important;

				svg {
					padding: 2px 0 !important;
				}
			}
        }
    }
}