// Variables
$classlist-tree-hover-text-color: $color-primary;
$classlist-tree-hover-background-color: color(primary-tone, 90);
$classlist-tree-selected-text-color: $color-primary;
$classlist-tree-selected-background-color: color(primary-tone, 90);

.classlist-tree {
	display: flex;
	padding: 0;
	border-radius: 0;

	.dbq-document-class-list-tree {
		float: left;
		width: 100%;
		border-radius: $border-radius-default;
		background: $sidebar-tile-background;
		-webkit-box-shadow: 0px 3px 5px rgba(0, 24, 62, 0.07);
		-moz-box-shadow: 0px 3px 5px rgba(0, 24, 62, 0.07);
		box-shadow: 0px 3px 5px rgba(0, 24, 62, 0.07);
		
		.dbqdclt-hidden {
			display: none;
		}
		.dbqdclt-disabled {
			cursor: not-allowed;
			pointer-events: none;
			opacity: 0.8;
		}
		.dbqdclt-tree {	
			list-style: none;
			margin: 0;
			padding: 0;
			.dbqdclt-folder-document-object {
				line-height: 24px;
				position: relative;
				margin: 0 !important;
				width: 100%;
				float: left;
				border-radius: 0;
				background: 0 !important;
				&:first-of-type {
					padding: 0;
				}
				&:last-of-type {
					margin: 0 !important;
				}
				.dbqdclt-inline-loading-indicator {
					display: none;
					position: absolute;
					width: 12px;
					height: 12px;
					border-width: 2px;
					top: 9px;
					margin-left: 3px;
				}
				.dbqdclt-arrow {
					float: left;
					cursor: pointer;
					margin-top: 1px;
				}
				.dropdown {
					float: right;
					margin: 5px 0;
					width: 20px;
					height: 20px;
					a {
						height: 100%;
						width: 100%;
					}
					svg {
						padding: 4px;
						width: $svg-icon-size;//20px;
						height: $svg-icon-size;//20px;
						float: left;
						fill: color(text-color-default);
					}
				}
				.dropdown-toggle {
					opacity: 0;
				}
				.dbqdclt-item {
					position: relative;
					padding: 0 5px;
					background: 0;
					border-radius: 0;
					a {
						fill: color(text-color-default);
						text-decoration: none;
					}
					>a {
						float: left;
						display: inline-block;
						width: calc(100% - 50px);
						max-width: calc(100% - 50px);
						padding: 5px 10px;
						line-height: 20px;
						font-size: $font-size-small;
						font-weight: 500;
					}
					span {
						svg {
							fill: color(text-color-default);
						}
					}
				}
				.dbqdclt-item.dbqdclt-hover {
					cursor: pointer;
					background: $classlist-tree-hover-background-color !important;

					.dropdown-toggle {
						opacity: 1;
					}
					.dropdown {
						svg {
							&:hover {
								fill: $classlist-tree-hover-text-color !important;
							}
						}
					}
					span {
						svg {
							fill: $classlist-tree-hover-text-color !important;
						}
					}
					a {
						color: $classlist-tree-hover-text-color !important;
						text-decoration: none;
					}
					.dbqdclt-arrow {
						svg {
							&:hover {
								fill: $classlist-tree-hover-text-color !important;
							}
						}
					}
				}
				&:last-child {
					>.dbqdclt-item {
						border-bottom: 0;
					}
				}
				a {
					color: color(text-color-default);
				}
				svg {
					fill: color(text-color-default);
				}
				.dbqdclt-item.dbqdclt-selected {
					background: $classlist-tree-selected-background-color !important;
					border-radius: 0px;
					a {
						color: $classlist-tree-selected-text-color !important;
						text-decoration: none;
						font-weight: 600;
					}
					&:hover {
						a {
							color: $classlist-tree-selected-text-color !important;
						}
					}
					span {
						svg {
							fill: $classlist-tree-selected-text-color !important;
						}
					}
					.dbqdclt-arrow {
						svg {
							&:hover {
								fill: $classlist-tree-selected-text-color !important;
							}
						}
					}
					.dropdown {
						svg {
							&:hover {
								fill: $classlist-tree-selected-text-color !important;
							}
						}
					}
				}
				.dbqdclt-item.dbqdclt-selected.dbqdclt-hover {
					span {
						svg {
							fill: $classlist-tree-selected-text-color !important;
						}
					}
				}
				&[data-is-loading-children="true"] {
					> .dbqdclt-item {
						.dbqdclt-inline-loading-indicator {
							display: block;
						}
						.dbqdclt-arrow {
							opacity: 0;
						}
					}
				}

				// Hide the load more container by default
				.dbqdclt-load-more-container {	
					display: none;
					align-items: center;
					margin: ($margin-default / 3) ($margin-default / 3) 0 ($margin-default / 3);

					.dbqdclt-button {
						display: flex;
						align-items: center;
						justify-content: center;
						background: $color-primary;
						color: $color-white;
						border: none;
						margin-right: 5px;
						padding: 0;
						outline: 0;
						width: 24px;
						height: 24px;
						border-radius: 50%;

						svg {
							fill: $color-white;
						}

						.dbqdclt-inline-loading-indicator {
							display: block;
							margin: 0;
							padding: 0;
							position: unset;
						}
					}

					.dbqdclt-load-more-info {
						font-weight: 600;
						line-height: 20px;
						font-size: $font-size-small;
						padding: 0;
						margin: 0;
						color: $text-color-default;						
						user-select: none; /* CSS3 (little to no support) */
						-ms-user-select: none; /* IE 10+ */
						-moz-user-select: none; /* Gecko (Firefox) */
						-webkit-user-select: none; /* Webkit (Safari, Chrome) */
					}
				}

				// Show the load more container when the list item is expanded and it has more children to load
				&[data-has-loaded-all-children="false"][data-is-collapsed="false"] {
					> .dbqdclt-load-more-container {
						display: flex;
					}
				}

				// Hide the load more container when it is first expanded and loading its first children
				&[data-has-loaded-children="false"][data-is-loading-children="true"] {
					> .dbqdclt-load-more-container {
						display: none;
					}
				}
			}
			.dbqdclt-folder-document-object[data-has-children="false"] {
				.dbqdclt-arrow {
					opacity: 0;
				}
			}
			.dbqdclt-chevron-right {
				svg {
					transform: rotate(0deg) !important;
				}
			}
			.dbqdclt-chevron-down {
				svg {
					transform: rotate(90deg) !important;
				}
			}
		}
		
		> .dbqdclt-tree {
			&:first-of-type {
				margin: 0;
			}

			> .dbqdclt-folder-document-object {
				&:first-of-type {
					& > .dbqdclt-item {
						border-radius: $border-radius-default $border-radius-default 0 0;
					}
				}

				&:last-of-type[data-is-collapsed="true"] {
					& > .dbqdclt-item {
						border-bottom-right-radius: $border-radius-default;
						border-bottom-left-radius: $border-radius-default;
					}
				}
			}
		}
	}
}

// Dropdown menu
.dbqdclt-dropdown-menu {
	li {
		> a {
			display: flex;
			align-items: center;
			width: 100%;

			.dbqdclt-submenu-chevron {
				margin-left: 8px;

				svg {
					margin-right: 0 !important;
				}
			}
		}
	}

    .dbqdclt-has-submenu {
        > .dbqdclt-submenu {
            display: none;
        }

		// Items with a submenu are not clickable
		> a {
			cursor: default;
		}
    }
}

// Dropdown submenu
.dbqdclt-submenu {
	@include dropdown-menu;

	.dbqdclt-submenu-loading {
        display: flex;
        align-items: center;
        padding: 8px 12px;
		
		.inline-loading-indicator {
        	margin-right: 8px;
    	}
	}

	&.dbqdclt-submenu-open {
		display: block !important;
		position: absolute;
		z-index: 1100;

		.dbqdclt-submenu-open.dbqdclt-submenu {
			left: auto;
			top: auto;
		}
	}
}

// ClassListMode 12 = Tree
// DisplayMode 1 = Right / 5 = RightSibling
// For views with a tree on the left and another list on the right, the content of the left view should scroll 
// within its own container. Update the styling for this specific case.
.document-class-list-control-content-container[data-top-class-list-mode="12"] {
	&[data-class-list-display-mode="1"],
	&[data-class-list-display-mode="5"] {
		.classlist-window {
			height: 100% !important;
			position: sticky;
			//top: $margin-default; // removed padding because of the integrated header styling (removed border and background)
			
			.classlist-window-content {
				overflow-y: auto !important;

				.dbq-document-class-list-tree {
					float: left;
					width: 100%;
					border-radius: 0;
					//background: $sidebar-tile-background;
					background: transparent;
					-webkit-box-shadow: none;
					-moz-box-shadow: none;
					box-shadow: none;

					> .dbqdclt-tree {
						> .dbqdclt-folder-document-object {
							&:first-of-type {
								& > .dbqdclt-item {
									border-radius: 0;
								}
							}

							&:last-of-type[data-is-collapsed="true"] {
								& > .dbqdclt-item {
									border-radius: 0;
								}
							}
						}
					}
				}
			}
		}
	}
}