#classlist-document-list {
	$global-elevated-block-background-color: $global-elevated-block-default-background-color;
	$elevated-border-color: $global-border-color;

	.dbqdcldl-container {
		position: relative;

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

		.dbqdcldl-list {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: $margin-default;
		}

		%dbqdcldl-card {
			width: 100%;
			max-width: 800px;
			padding: $padding-default;
			background: $global-elevated-block-background-color;
			border: 1px solid $elevated-border-color;
			border-radius: $border-radius-default;
		}

		.dbqdcldl-empty {
			@extend %dbqdcldl-card;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: 5px;
			min-height: 120px;
			text-align: left;

			.dbqdcldl-empty-icon,
			.dbqdcldl-empty-text {
				color: color(text-color-default);
				opacity: 0.7;
			}

			.dbqdcldl-empty-icon {
				display: flex;
				flex-shrink: 0;
				align-items: center;
				justify-content: center;

				svg {
					width: $svg-icon-size;
					height: $svg-icon-size;
					fill: currentColor;
				}
			}

			.dbqdcldl-empty-text {
				margin: 0;
				font-size: 14px;
			}
		}

		.dbqdcldl-item {
			@extend %dbqdcldl-card;
			display: flex;
			flex-direction: column;
			gap: 0;
			overflow: hidden;

			.dbqdcldl-item-content {
				width: 100%;
				cursor: pointer;

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

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

				.flex-container {
					gap: 15px;

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

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

				.dbqdb-block {
					&.dbqdb-block-elevated-background {
						border: none;
						background: transparent;
					}
				}

				.dbqdb-footer,
				.modal-footer,
				.dbqdb-sidepanel-footer-buttons {
					padding: 0;
				}
			}

			&.dbqdcldl-item-editing {
				.dbqdcldl-item-content {
					cursor: default;
				}
			}

			&.dbqdcldl-selected {
				border-color: $color-primary;
			}

			&.dbqdcldl-item-add {
				.dbqdcldl-item-content {
					cursor: default;
				}
			}

			.dbqdcldl-item-actions {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-end;
				gap: ($margin-default / 2);
				padding-top: $margin-default;

				.btn {
					flex: 0 1 auto;
					display: inline-flex;
					align-items: center;
					gap: 6px;

					svg {
						width: $classlist-tree-grid-function-button-svg-size;
						height: $classlist-tree-grid-function-button-svg-size;
						flex-shrink: 0;
					}
				}
			}

			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;
							}
						}
					}
				}
			}
		}

		.dbqdcldl-create-container {
			display: flex;
			justify-content: center;
			padding: $padding-default 0;

			.dbqdcldl-create-button,
			.dbqdcldl-create-dropdown {
				margin: 0 auto;
			}

			.dbqdcldl-create-button {
				font-size: 18px;
				padding: 12px 24px;
			}
		}

		.dbqdcldl-loading-spinner-container {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}