//@import "../../../abstracts/abstracts";
$nav-tabs-container-height: 45px;
$nav-tabs-tile-background: $color-layer-2;
$collapsed-classlist-window-height: $nav-tabs-container-height;

.document-class-list-control-container {
	overflow: auto;
	height: 100%;
	width: 100%;
	@include scrollbar;
	
	.document-class-list-control-content-container {
		background: none;
		display: flex;
		flex-direction: column;
		gap: 15px;
		padding: 15px;
		padding-top: 0px; // removed padding because of the integrated header styling (removed border and background)

		.form-inline {
			background: $modal-input-background;
			border-color: $modal-border-color;
			color: color(text-color-default) !important;
			font-size: $font-size-base;
			line-height: 14px;
			padding: 0;

			&::-webkit-input-placeholder {
				color: $modal-input-color !important;
			}

			&::-moz-placeholder {
				color: $modal-input-color !important;
			}

			&:-moz-placeholder {
				color: $modal-input-color !important;
			}
		}

		.form-control {
			&::-webkit-input-placeholder {
				color: $modal-input-color !important;
			}

			&::-moz-placeholder {
				color: $modal-input-color !important;
			}

			&:-ms-input-placeholder {
				color: $modal-input-color !important;
			}

			&:-moz-placeholder {
				color: $modal-input-color !important;
			}
		}

		.document-class-list {
			.row-button {
				border: none;
				font-size: $font-size-base !important;
				line-height: 20px;
			}
		}

		.classlist-window {
			width:100%;
			min-width: 0;
			padding: 0;
			border: 1px solid $global-border-color;
			@include border-radius($global-border-radius);
			background: color(background-color-default);
			display: flex;
			flex-direction: column;

			.classlist-window-header {
				display: flex;

				.document-class-list-tabs-container {
					display: flex;
					justify-content: space-between;
					width: 100%;

					.classlist-window-tabs {
						display: flex;
						flex-direction: column;
						width: 100%;
						z-index: unset !important; // Frenk 28-08-2023 The z-index is set to 15 somewhere else. I am unsure why. It is unset here to prevent popups in top lists to hide behind this bar.
					
						.classlist-window-control-buttons,
						.dbqdcl-nav-tab-options-container {
							position: absolute;
							display: none;
							align-items: center;
							flex-shrink: 0;
							margin-right: 5px;
							height: $nav-tabs-container-height;
    						top: 0;
							right: 0;

							.dbqdcl-window-control-button,
							.dbqdcl-nav-tab-option-button {
								display: flex;
								align-items: center;
								justify-content: center;
								background: none;
								border: none;
								outline: 0;
								width: 30px;
								height: 30px;
								border-radius: 50%;
								padding: 0px;
								cursor: pointer;
								background: $nav-tabs-tile-background;
								border: 1px solid $nav-tabs-tile-background;

								svg {
									fill: $text-color-default;
									width: $svg-icon-size;//24px;
									height: $svg-icon-size;//24px;
								}

								&:hover {
									svg {
										fill: $color-primary;
									}
								}
							}
						}
						
						.dbqdcl-nav-tabs-main-menu-container {
							&:hover {
								.dbqdcl-nav-tab-options-container {
									display: flex;
								}
							}
						}
					}
				}
			}

			.classlist-window-content {
				height: calc(100% - $nav-tabs-container-height);
				//overflow-y: visible;
				overflow-y: auto;
				padding: calc($padding-default / 2) 0;
				@include scrollbar;

				.dbqdt-table-active-tools-cell-tool {
					&:after {
						box-shadow: none;
					}
				}

				#classlist-tree-grid {
					display: inline-block;
					width: 100%;
					clear: both;
					margin: 0;
					padding: ($padding-default / 2) $padding-default;
					background-color: unset;
					-webkit-box-shadow: none;
					-moz-box-shadow: none;
					box-shadow: none;

					> :first-child {
						border-radius: $border-radius-default;
						background-color: $classlist-background;
						box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
						-webkit-box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
						-moz-box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
					}
				}

				.dbq-dashboard-column-blocks {
					.dbqdb-block-elevated-background {
						height: 100% !important;
					}
				}
			}

			&.class-list-window-is-fullscreen {
				height: 100% !important;

				.classlist-window-tabs {
					display: none;
				}

				> .classlist-window-content {
					height: 100% !important;

					> .classlist-header {
						
						> #classlist-top-buttons,
						> #classlist-filters,
						> #classlist-dashboard {
							display: none;
						}
					}

					.classlist-container {
						height: 100% !important;

						.dbqdcltg-sidepanel {
							.dbq-form {
								max-height: initial;
							}
						}
					}
				}
			}

			&.class-list-window-is-hidden {
				display: none;
			}

			&[data-is-collapsible="true"] {
				.classlist-window-header {
					.document-class-list-tabs-container {
						display: flex;
						justify-content: space-between;
						width: 100%;
						
						.dbqdcl-nav-tab-options-container {
							right: 30px;
						}

						.classlist-window-control-buttons {
							display: flex;	
						}
					}
				}
			}

			&[data-is-collapsed="true"] {
				flex: 0 0 $collapsed-classlist-window-height;

				.classlist-window-header {
					.document-class-list-tabs-container {
						border-bottom: 0;

						.dbqdcl-nav-tabs-main-menu-container {
							@include border-radius($border-radius-default);
							border-bottom: 0;
						}
					}
				}

				.classlist-window-content {
					display: none;
				}

				.dbqdcl-window-control-collapse-button {
					display: none !important;
				}
			}

			&[data-is-collapsed="false"] {
				.dbqdcl-window-control-expand-button {
					display: none !important;
				}
			}

			// While the initial load hasn't completed, we want to keep some containers hidden.
			// This is because we don't know for certain if these containers should be visible
			// until the data has been fully loaded.
			&[data-has-completed-initial-load="false"] {
				#classlist-top-buttons,
				#classlist-dashboard-header,
				#classlist-dashboard-footer {
					display: none;
				}
			}
		}

		// FolderDocumentClassListDisplayMode { BottomClosed = 3, BottomOpen = 2, BottomSibling = 4, Drilldown	= 0, Right = 1, RightSibling = 5 }
		&[data-class-list-display-mode="1"],
		&[data-class-list-display-mode="5"] {
			display: flex;
			flex-direction: row;
		}
		
		&[data-class-list-display-mode="2"][data-top-class-list-mode="20"] {
			//height: auto;
			height: 100%;

			&:not(:has(.classlist-window[data-is-collapsed="true"])) {
				.classlist-window {
					flex: 1 1 auto;

					&:first-of-type {
						flex: 0 0 auto;
					}
				}
			}
		}

		&[data-class-list-display-mode="3"] {
			
		}

		// FolderDocumentClassListMode { 
		//   CanvasModel = 27, 
		//   Chat = 28, 
		//   ComponentBrowser = 29, 
		//   DeveloperTools = 11, 
		//   Timeline = 1, 
		//   KanbanBoard = 16, 
		//   Map = 22, 
		//   MatterportModel = 10, 
    	//   ResourcePlanner: 26,
		//   Timeline = 13, 
		//   Tree = 12,
		//   Workflow = 15 
		// }
		&[data-top-class-list-mode="1"],
		&[data-top-class-list-mode="10"],
		&[data-top-class-list-mode="11"],
		&[data-top-class-list-mode="12"],
		&[data-top-class-list-mode="13"],
		&[data-top-class-list-mode="15"],
		&[data-top-class-list-mode="16"],
		&[data-top-class-list-mode="22"],
		&[data-top-class-list-mode="26"],
		&[data-top-class-list-mode="27"],
		&[data-top-class-list-mode="28"],
		&[data-top-class-list-mode="29"] {
			height: 100%;

			.classlist-window[data-is-collapsed="false"] {
				max-height: 100%;
			}
		}
	}

	#classlist-top-buttons {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		float: left;
		width: initial;

		.btn {
			background: color(button-background-color);
			border: $border-default;
			border-color: color(button-border-color);
			color: color(button-text-color);
			font-size: $font-size-base;
			// -webkit-border-radius: $border-radius-button-default;
			// -moz-border-radius: $border-radius-button-default;
			// border-radius: $border-radius;
			-moz-background-clip: border-box;
			-webkit-background-clip: border-box;
			background-clip: border-box;

			&:hover {
				background: color(button-hover-background-color);
				border-color: color(button-hover-border-color);
				color: color(button-hover-text-color);
				transition: all 0.3s ease;
			}

			&:active {
				background: color(button-hover-background-color);
				border-color: color(button-hover-border-color);
				color: color(button-hover-text-color);
			}
		}

		.btn:last-child {
			margin-right: 0;
		}

		.btn-group {
			.dropdown-toggle-split {
				padding: 5px;

				.sr-only {
					position: relative;
				}
			}

			svg {
				fill: color(button-text-color);
			}

			&:hover {
				svg {
					fill: color(button-hover-text-color);
				}
			}
		}

		.dbqdcltg-top-button { 
			.inline-loading-indicator {
				display: inline-block;
				vertical-align: middle;
				margin-right: 6px;
				width: 12px;
				height: 12px;
				border-width: 1px;
			}

			svg {
				display: inline-block;
				vertical-align: middle;
				margin-left: 6px;
			}
		}
	}
}

// Note: These containers are used to combine multiple containers and then used to calculate the height of its content.
//       The height will then be used to set a calculated height for the class list (such as KanbanBoard and Timeline)
.classlist-header,
.classlist-footer {
	float: left;
	width: 100%;
}

#document-class-list-filters {
	.form-group {
		margin-bottom: 0 !important;
		padding: 0 !important;

		.form-control {
			font-size: $font-size-small;
			border: 2px solid $modal-border-color;
		}
	}

	label {
		font-size: $font-size-small;
		min-width: 30px;
		position: relative;
		line-height: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #001323;
		font-weight: 600;

		input[type="checkbox"] {
			+ {
				.cr {
					> .cr-icon {
						opacity: 0;
						transform: scale(3) rotateZ(-20deg);
					}
				}
			}

			&:checked {
				+ {
					.cr {
						background-color: $color-primary;
						border-color: color(button-border-color);
						fill: #fff;

						> .cr-icon {
							opacity: 1;
							transform: scale(1) rotateZ(0deg);
						}
					}
				}
			}
		}
	}
	// To-do: CSS below still needs to be organised (automatically generated)

	.dbq-checkbox-container {
		float: left;
		width: 100%;
		margin: 5px 0 0 0;
	}

	.dbq-checkbox-container[data-visible="true"] {
		&:last-of-type {
			margin: 0 !important;
		}
	}

	label.dbq-checkbox {
		display: block;
		position: relative;
		cursor: pointer;
		font-size: 22px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		padding-left: 0;
		margin-bottom: 0;
		float: left;
		width: 100%;
		border-radius: 3px;

		input {
			position: absolute;
			opacity: 0;
			cursor: pointer;
			height: 0;
			width: 0;

			&:checked {
				~ {
					.dbq-checkmark {
						background-color: $color-primary;
						border: 2px solid $color-primary;

						&:after {
							display: block;
						}
					}
				}
			}
		}

		&:hover {
			input {
				~ {
					.dbq-checkmark {
						background-color: #001323;
					}
				}
			}
		}

		.dbq-checkmark {
			&:after {
				left: 5px;
				top: 1px;
				width: 6px;
				height: 11px;
				border: solid #fff;
				border-width: 0 2px 2px 0;
				-webkit-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
			}
		}
	}

	.dbq-checkbox-value {
		// float: left;
		width: 100%;
		padding: 0 0 0 30px;
		font-size: 14px;
		line-height: 20px;
		font-weight: 400;
		display: flex;
		white-space: nowrap;
	}

	.document-class-list-filter {
        max-width: 300px;
		//float: right;
		margin: 10px 10px 0 0;
		padding: 0;
		background: $modal-input-background;
		border: 0;
		border-radius: 10px;

		.dbq-checkbox-filters {
			input {
				display: none;
			}
		}

		.cr {
			float: left;
			width: 20px;
			height: 20px !important;
			margin: 5px;
			clear: both;
			border-radius: 5px;
			border: 2px solid $modal-border-color;
			background: $modal-input-background;
			cursor: pointer;

			svg {
				width: 16px;
				height: 16px;
				padding: 3px;
				margin: 0;
				top: 0;
				left: 0;
				float: left;
			}
		}

		input.form-control {
			background-color: $modal-input-background;
			border: 2px solid $modal-border-color;
			height: 34px;
		}

		label {
			margin: 0;
			float: left;
			color: #595f6e !important;
			background: $modal-input-background;
			border: 2px solid $modal-border-color;
			border-bottom: 0;
			font-weight: 600;
			width: 100%;
			padding: 3px 5px;
		}

		.filter-boolean-icon {
			// float: left;
			display: inline-block;
			width: 10px;
			height: 10px;
			padding: 0;
			margin: 10px 5px;
		}
		// select {
		// 	max-width: 200px !important;
		// }
	}

	.document-class-list-filter-column {
		float: left;
		margin-right: 10px;

		.document-class-list-filter {
			clear: both;

			&:first-of-type {
				clear: none;
			}
		}
	}

	.checkbox {
		label {
			input[type="checkbox"] {
				+ {
					.cr {
						> .cr-icon {
							opacity: 0;
							transform: scale(3) rotateZ(-20deg);
						}
					}
				}

				&:checked {
					+ {
						.cr {
							> .cr-icon {
								opacity: 1;
								transform: scale(1) rotateZ(0deg);
							}
						}
					}
				}
			}
		}
	}

	.bootstrap-datetimepicker-widget {
		.list-unstyled {
			padding: 5px;
		}

		table {
			tr {
				background: #ffffff;
				border-bottom: 1px solid #ffffff;
				color: #717886;
			}

			thead {
				tr {
					&:first-child {
						th {
							&:hover {
								background: #e5e7ec !important;
							}
						}
					}
				}
			}

			td.day {
				&:hover {
					background: #e5e7ec !important;
				}
			}
		}
	}

	.bootstrap-datetimepicker-widget.dropdown-menu {
		li {
			padding: 0 !important;
			background: #ffffff !important;

			&:hover {
				background: 0 !important;
			}
		}

		background: #ffffff !important;
	}

	#document-class-list-filters {
		padding: 0 0 10px 0;
		flex-direction: row;

		.document-class-list-filter {
			margin-bottom: 0;
		}
	}

	.document-class-list-filter {
		label {
			width: 100%;
			padding: 3px 5px;
		}

		&.checkbox-bottom {
			span.dbq-checkbox-label-filters {
				width: 100%;
				padding: 3px 5px;
			}
		}
	}
}

// Change the padding of the top buttons for portals, to compensate for the colapse menu button 
.generic-folder-document-class-list-container {
	#classlist {
		.classlist-window {
			&[data-window-index="0"] {
				#classlist-top-buttons {
					padding: 7.5px 15px 7.5px 25px !important;
				}
			}
		}
	}
}

//#classlist-filters {
// width: calc(100% - 20px) !important;
// margin: 0 10px !important;
// float: left;
//}
@media only screen and (max-width: 1024px) {
	.document-class-list-control-container {
		.document-class-list-control-content-container {
			&[data-class-list-display-mode="1"],
			&[data-class-list-display-mode="5"] {
				flex-direction: column;
			}
		}
	}
}