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

// Variables
$global-elevated-block-background-color: $global-elevated-block-default-background-color;
$elevated-border-color: $global-border-color;

.dbqdclrvl-container,
.folder-document-class-list-dashboard-document,
.classlist-dashboard {
	.dbq-document {
		width: 100%;
		.topic {
			background: transparent;
			p.dbq-round-image {
				margin-bottom: 0;
				width: 150px;
				height: 150px;
				display: block;
				max-width: 100%;
				border-radius: 50%;
				overflow: hidden;
				text-align: center;

				> img.dbqdb-image {
					min-width: 100%;
					min-height: 100%;
					margin: 0 auto;
					max-height: unset;
					object-fit: cover;
				}
			}
			
			p.dbq-max-height-170 {
				max-width: 170px;
				max-height: 170px;
				min-height: 170px;
				width: 100%;
				height: 100%;
			}
			.pull-right {
				> img.dbqdb-image {
					float: right;
				}
			}
			.dbq-element-header-5 {
				font-size: 13px;
				color: $dbq-element-header-5;
				font-weight: 400 !important;
			}
			// [data-element-type="InputProperty"] + .dbqdb-element:not(.dbq-colon-first):not(.dbq-colon-second) {
			// 	p {
			// 		min-height: 50px;
			// 	}
			// }
			.dbqdb-element:not(.dbq-colon-first):not(.dbq-colon-second) {
				p {
					font-weight: 500;
					font-size: 14px;
					word-break: break-word;
				}
			}
			h2 {
				color: $text-color-default;
			}
		}
	}
}

.folder-document-class-list-dashboard-document,
.classlist-dashboard {
	.dbq-document {
		.topic {
			.dbqdb-image {
				max-height: 150px;
			}
		}
	}
}

#classlist-record-view-list {
	.dbqdclrvl-container {
		display: flex;
		align-items: stretch;
		//background-color: $classlist-background;
		position: relative;

		&[data-is-loading="true"] {
			min-height: (100 + ($padding-default * 2));
		}

		.nav-tabs {
			padding: 0 !important;
			background: transparent;
			margin-bottom: 10px;
			li {
				margin: 0 0 10px 0;
			}
		}

		.dbqdclrvl-item,
		.dbqdclrvl-item-empty {

			.dbqdb-header {
				background: none;
				border-bottom: none;
			}

			.dbq-form {
				.block.dbqdb-block-elevated-background {
					.row {
						&[data-element-type=Text] {
							p {
								margin-bottom: 0px;
							}
						}
					}
				}
			}
		}

		.dbqdclrvl-item {
			width: 100%;//calc(100% - 80px);
			//padding: 15px;
			cursor: pointer;

			.flex-container {
				gap: 15px;
				//margin-bottom: 15px; // To-do: remove if margin problem is solved.

				.dbq-column {
					margin-right: 0;
					min-height: min-content;

					.dbqdb-block {
						&.dbqdb-block-elevated-background {
							height: min-content;
							margin-bottom: $margin-default;

							.flex-container {
								//margin-bottom: 0px;
							}
						}
					}
				}

				&:last-of-type {
					//margin-bottom: 0; To-do: remove if margin problem is solved.
				}

				.input-list-item {
					.flex-container {
						//margin-bottom: $global-margin;
					}
				}
			}

			.dbqdb-block {
				&.dbqdb-block-elevated-background {
					border: $sidebar-tile-border;
					background: $global-elevated-block-background-color;
					border: 1px solid $elevated-border-color;
					//box-shadow: $global-box-shadow;
				}
			}

			.dbqdb-footer,
			.modal-footer {
				padding: 0;
			}
		}
		.dbqdclrvl-item-empty {
			width: 100%;
			padding: 15px;
			display: flex;
			+ {
				.dbqdclrvl-item-toolbar {
					display: none;
				}
			}
			button {
				margin: 15px auto;
				font-size: 22px;
				padding: 15px;
			}
		}
		.dbqdclrvl-item-toolbar {
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			flex-direction: row-reverse;
			margin-top: ($margin-default / 2);
			margin-right: ($margin-default / 2);
			background: $global-background-color-default;
			border-radius: $border-radius-default;
			box-shadow: $sidebar-tile-drop-shadow;

			.dbqdclrvl-dropdown {
				//position: absolute;
				display: flex;
				fill: color(text-color-default);
				width: $classlist-tree-grid-function-button-size;
				height: $classlist-tree-grid-function-button-size;
				align-items: center;
				justify-content: center;
				//top: 0;
				//right: 0;
				button.dropdown-toggle {
					border: none;
					background: none;
					padding: 0 !important;

					svg {
						width: 15px;
						height: 15px;
					}

					&:hover {
						background: none;
						border: none;

						svg {
							fill: $color-primary;
						}
					}
				}
				.dbqdclrvl-dropdown-menu {

				}
			}
			.dbqdclrvl-button-drilldown {
				background: none;
				outline: none;
				border: none;
				width: 30px;
				height: 30px;
				svg {
					width: 30px;
					height: 30px;
					padding: 0;
					margin: 0;
					fill: color(text-color-default);
				}
			}
			                
			.dbqdclrvl-elevated-function {
				display: flex;
				align-items: center;
				justify-content: center;
				background: none;
				border: none;
				outline: 0;
				width: $classlist-tree-grid-function-button-size;
				height: $classlist-tree-grid-function-button-size;
				border-radius: 50%;
				padding: 6px;

				svg {
					fill: $text-color-default;
					width: $classlist-tree-grid-function-button-svg-size;
					height: $classlist-tree-grid-function-button-svg-size;
				}

				&:hover {
					background: $color-white;
					color: $color-white;
					box-shadow: 0 0 5px $color-white;
					text-shadow: 0 0 5px $color-white;

					svg {
						fill: $color-primary !important;
						transform: scale(1.1);
					}
				}
			}
		}

		form[data-view-mode=View] { 
			.dbq-form {
				.row {
					&.dbq-form-group-title[data-element-type=Text] {
						margin-bottom: 0;
						p {
							background:$modal-label-background;
							color: color(text-color-default);
							border-color: $modal-border-color;
						}
					}
					.dbq-form-group-padding {
						p.dbq-form-group-padding {
							border: none !important;
						}
					}
				}
			}
		}

		.dbqdb-footer,
		.modal-footer {
			background-color: transparent;
			border: 0 none;
			padding-left: 0px;
			padding-right: 0px;
		}
	}

	// Custom document styling specifically for record views
	.input-list[data-is-read-only="true"] {
		.input-list-item, 
		.input-list-item:first-of-type 
		.input-list-item:last-of-type {
			background-color: transparent;
			border: 0;

			.input-list-item-content {
				padding: 0;

				.flex-container {
					margin-bottom: 0 !important;

					.dbqdb-element[data-element-type=Header] {
						margin-bottom: 0;
					}
				}
			}

			&:has(+ .input-list-item) {
				.input-list-item-content {
					//p {
					//	margin-bottom: 5px; // Margin should be on the surrounding dbqdb-element
					//}

					.dbqdb-element {
						margin-bottom: 0;
					}
				}
			}
		}

		.input-list-item:not(:first-of-type) {
			p.dbqdb-insert-property {
				min-height: 30px; // Removed important
			}
		}

		&.input-list[data-show-index-numbers=true] {
			.input-list-item {
				.input-list-item-index-background {
					border: 0;
					font-size: $font-size-base;
					margin-right: 10px;
					width: 15px;
					height: initial;

					.input-list-item-index {
						font-size: $font-size-base;
						color: $text-color-default;
					}
				}
			}
		} 
	}
}