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

// Knowledge base explorer (two-pane UI for FolderDocumentClassListMode.KnowledgeBase)
// Class prefix: dbqkbe-

// The explorer fills the class list window (full-height mode, see _classlist-windows.scss): the tree and the right pane
// each scroll on their own, and the search bar stays on top of the right pane.
.dbqkbe-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.dbqkbe-panes {
	display: flex;
	flex-direction: row;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
}

// ----------------------------------------------
// Left pane: tree
// ----------------------------------------------

// The width can be changed with the resize handle (DbqKnowledgeBaseExplorerControl.initTreeResizeHandle sets --dbqkbe-tree-width)
.dbqkbe-tree-pane {
	flex: 0 0 var(--dbqkbe-tree-width, 280px);
	width: var(--dbqkbe-tree-width, 280px);
	max-width: var(--dbqkbe-tree-width, 280px);
	min-height: 0;
	overflow-y: auto;
	box-sizing: border-box;
	background: $color-layer-1;
	border-right: 1px solid $global-border-color;
	padding: $global-padding 0;
	@include scrollbar;
}

// The resize handle on the border between the tree and the content (styled by DbqResizeHandle, _resize-handle.scss).
// The negative margins put it over the border without taking space.
.dbqkbe-tree-resize-handle {
	flex: 0 0 9px;
	margin: 0 -4px 0 -5px;
	z-index: 2;
}

.dbqkbe-tree-resizing {
	user-select: none;

	.dbq-resize-handle::after {
		opacity: 0.5;
	}
}

// Header with the search input (DbqKnowledgeBaseTreeControl). It stays at the top while the tree scrolls,
// and has the height of the search bar of the right pane, so both line up. The negative margin and top cover the padding of the tree pane
// (a sticky element stays inside the padding of its scroll container).
.dbqkbe-tree-header {
	position: sticky;
	top: -$global-padding;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: -$global-padding;
	padding: $global-padding $global-padding ($global-padding / 2) $global-padding;
	background: $color-layer-1;
}

.dbqkbe-tree-search {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;

	> svg {
		position: absolute;
		top: 50%;
		left: 12px;
		width: 16px;
		height: 16px;
		margin-top: -8px;
		fill: color(text-color-default);
		opacity: 0.5;
		pointer-events: none;
	}

	.dbqkbe-tree-search-input {
		width: 100%;
		height: 38px;
		padding: 0 10px 0 34px;
		border: 1px solid $global-border-color;
		border-radius: 19px;
		background: $color-layer-1;
		color: color(text-color-default);
		font-size: 14px;
		outline: none;

		&:focus {
			border-color: $color-primary;
		}
	}
}

.dbqkbe-tree {
	position: relative;
	float: left;
	width: 100%;

	// The loading spinner of the tree search, at the top (the results can be longer than the pane)
	> .dbqkbc-loading-spinner-container {
		align-items: flex-start;
	}
}

// The search value in the names of the found items
.dbqkbe-tree-search-mark {
	padding: 0;
	border-radius: 2px;
	background: rgba($color-primary, 0.25);
	color: inherit;
}

// Loading / no results text below the search input
.dbqkbe-tree-search-message {
	float: left;
	width: 100%;
	padding: 8px $global-padding;
	box-sizing: border-box;
	color: color(text-color-default);
	opacity: 0.6;
	font-size: 14px;
}

.dbqkbe-tree-home,
.dbqkbe-tree-root,
.dbqkbe-tree-search-root,
.dbqkbe-tree-children {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
}

// The indent of a level is padding inside the node content (not on the children list), so the selection border
// and the background of a selected or hovered node always start at the left of the tree
$dbqkbe-tree-indent: 16px;
$dbqkbe-tree-node-padding-left: 4px;
$dbqkbe-tree-max-indent-level: 12;

$dbqkbe-tree-level-selector: "";
@for $level from 1 through $dbqkbe-tree-max-indent-level {
	$dbqkbe-tree-level-selector: "#{$dbqkbe-tree-level-selector} .dbqkbe-tree-children";

	#{$dbqkbe-tree-level-selector} > .dbqkbe-tree-node > .dbqkbe-tree-node-content {
		padding-left: $dbqkbe-tree-node-padding-left + $level * $dbqkbe-tree-indent;
	}
}

.dbqkbe-tree-node {
	float: left;
	width: 100%;
	position: relative;
	margin: 0;
	line-height: 24px;

	&.dbqkbe-tree-node-selected {
		> .dbqkbe-tree-node-content {
			background-color: $render-engine-background-color;
			border-left: 5px solid $color-primary;

			.dbqkbe-tree-node-name {
				color: $color-primary;
				font-weight: 600;
			}
		}
	}

	&.dbqkbe-tree-node-expanded {
		> .dbqkbe-tree-node-content {
			.dbqkbe-tree-chevron-collapsed {
				display: none;
			}

			.dbqkbe-tree-chevron-expanded {
				display: inline-flex;
			}
		}
	}
}

.dbqkbe-tree-node-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	padding: 4px 8px 4px $dbqkbe-tree-node-padding-left;
	cursor: pointer;
	border-left: 5px solid transparent;
	box-sizing: border-box;

	&:hover {
		background: $color-layer-2;

		.dbqkbe-item-functions {
			.dropdown-toggle {
				opacity: 1;
			}
		}
	}
}

.dbqkbe-tree-chevron {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;

	svg {
		width: 16px;
		height: 16px;
		fill: color(text-color-default);
	}

	&.dbqkbe-tree-chevron-spacer {
		cursor: default;
	}

	.dbqkbe-tree-chevron-expanded {
		display: none;
	}
}

.dbqkbe-tree-node-icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;

	svg {
		width: 16px;
		height: 16px;
		fill: color(text-color-default);
	}

	img {
		width: 16px;
		height: 16px;
		object-fit: contain;
	}
}

// Drafts and historic documents are shown dimmed, the same as in the list on the right
.dbqkbe-tree-node[data-document-version-state="0"],
.dbqkbe-tree-node[data-document-version-state="2"] {
	> .dbqkbe-tree-node-content {
		.dbqkbe-tree-node-icon,
		.dbqkbe-tree-node-name,
		.dbqkbe-tree-node-description,
		.dbqkbe-tree-node-tags {
			opacity: 0.6;
		}
	}
}

.dbqkbe-tree-node-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: $font-size-small;
	font-weight: 500;
	line-height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: color(text-color-default);
}

// Tree items with more text lines (FolderDocumentClassListMaxTextLineCount > 1): the description and the tags below the name
.dbqkbe-container.dbqkbe-tree-extended .dbqkbe-tree-pane {
	flex-basis: var(--dbqkbe-tree-width, 360px);
	width: var(--dbqkbe-tree-width, 360px);
	max-width: var(--dbqkbe-tree-width, 360px);
}

.dbqkbe-tree-node.dbqkbe-tree-node-extended {
	> .dbqkbe-tree-node-content {
		align-items: flex-start;
		padding-top: 6px;
		padding-bottom: 6px;

		// Keep the chevron and the icon next to the name (first line)
		> .dbqkbe-tree-chevron,
		> .dbqkbe-tree-node-icon {
			margin-top: 0;
		}
	}
}

.dbqkbe-tree-node-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;

	.dbqkbe-tree-node-name {
		flex: 0 0 auto;
	}
}

.dbqkbe-tree-node-description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12px;
	line-height: 16px;
	color: color(text-color-default);
	opacity: 0.75;
}

.dbqkbe-tree-node-tags {
	margin-top: 3px;

	.dbqkba-document-tag {
		display: inline-block;
		margin: 0 3px 2px 0;
		padding: 1px 5px;
		font-size: 10px;
		line-height: 14px;
	}
}

// A file with its size and update time: the file type icon gets the height of the name and the two meta lines
.dbqkbe-tree-node.dbqkbe-tree-node-file-extended > .dbqkbe-tree-node-content > .dbqkbe-tree-node-icon {
	flex: 0 0 40px;
	width: 40px;
	height: 52px;
	margin-right: 8px;

	img {
		width: 100%;
		height: 100%;
	}
}

.dbqkbe-tree-node-meta {
	font-size: 12px;
	line-height: 16px;
	color: color(text-color-default);
	opacity: 0.6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

// Compact mode (a class list wrapper in a sidepanel that is not fullscreen): only the list of the right pane, over the full width.
// Its toolbar is hidden, the class list toolbar above it has the same functions.
.dbqkbe-container.dbqkbe-compact {
	.dbqkbe-tree-pane,
	.dbqkbe-tree-resize-handle {
		display: none;
	}

	.dbqkbe-detail-pane > .dbqkbe-detail-pane-body {
		padding-left: 0;
		padding-right: 0;
	}

	.dbqkbe-list-toolbar {
		display: none;
	}
}

// Function dropdown of a tree node or list row (visible on hover)
.dbqkbe-item-functions {
	flex: 0 0 24px;
	margin-left: 4px;

	.dropdown-toggle {
		opacity: 0;
		background: 0;
		border: 0;
		box-shadow: none;
		padding: 0;
		width: 24px;
		height: 24px;

		&::after {
			display: none;
		}

		svg {
			width: 16px;
			height: 16px;
			fill: color(text-color-default);
		}
	}

	&.show .dropdown-toggle {
		opacity: 1;
	}
}

// While a folder loads its children, the chevron is replaced by a loading indicator (like DbqFolderTree)
.dbqkbe-tree-node.dbqkbe-tree-node-loading > .dbqkbe-tree-node-content > .dbqkbe-tree-chevron {
	> span {
		display: none !important;
	}

	&::after {
		content: "";
		@extend %dbqkbe-tree-loading-spinner;
	}
}

// A loaded folder without children has no chevron
.dbqkbe-tree-node.dbqkbe-tree-node-empty > .dbqkbe-tree-node-content > .dbqkbe-tree-chevron {
	visibility: hidden;
	cursor: default;
}

%dbqkbe-tree-loading-spinner {
	display: inline-block;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border: 2px solid $color-layer-12;
	border-radius: 50%;
	border-right-color: transparent;
	border-bottom-color: transparent;
	animation-name: loading;
	animation-duration: 700ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

// ----------------------------------------------
// Right pane: detail
// ----------------------------------------------

// The search bar stays on top of the right pane, the selected item below it scrolls
.dbqkbe-detail-pane {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	box-sizing: border-box;

	> .dbqkbe-filters-container {
		flex: 0 0 auto;
	}
}

.dbqkbe-detail-pane > .dbqkbe-detail-pane-body {
	flex: 1 1 auto;
	min-height: 0;
	container: dbqkbe-detail / inline-size;
	overflow-y: auto;
	padding: 0 $global-padding $global-padding $global-padding;
	box-sizing: border-box;
	@include scrollbar;
}

// Class list document/file wrappers: no tree, detail pane full width
.dbqkbe-container.dbqkbe-no-tree {
	.dbqkbe-tree-pane {
		display: none;
	}

	.dbqkbe-detail-pane {
		flex: 1 1 auto;
		width: 100%;

		> .dbqkbe-detail-pane-body {
			padding-left: 0;
		}
	}
}

// Back button above a document/file preview when hasTree=false
.dbqkbe-back-to-list {
	width: 100%;
	margin-bottom: $global-margin;
}

.dbqkbe-back-to-list-button {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: color(text-color-default);
	font-size: $font-size-small;
	font-weight: 500;
	cursor: pointer;

	svg {
		width: 18px;
		height: 18px;
		fill: color(text-color-default);
	}

	&:hover {
		color: $color-primary;

		svg {
			fill: $color-primary;
		}
	}
}

.dbqkbe-back-to-list-label {
	line-height: 20px;
}

// The knowledge base back stack is merged into the class list breadcrumbs at the top
// (DbqDocumentClassListBackStackItem), so its own breadcrumbs are hidden, like the old knowledge base did.
.dbqkbe-breadcrumbs-wrapper {
	display: none;
}

.dbqkbe-detail-pane-body,
.dbqkbe-detail,
.dbqkbe-detail-body,
.dbqkbe-folder-page,
.dbqkbe-search-results-page,
.dbqkbe-document-page,
.dbqkbe-file-page {
	width: 100%;
}

.dbqkbe-folder-header-container {
	margin-bottom: $global-margin;
}

// Toolbar above the list: title, item count and the add/download functions
.dbqkbe-list-toolbar {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	padding: 8px 0;
	border-bottom: 1px solid $global-border-color;

	.dbqkbe-list-title {
		font-size: $font-size-medium;
		font-weight: 600;
		color: color(text-color-default);
	}

	.dbqkbe-list-count {
		margin-left: 4px;
		font-size: $font-size-small;
		color: color(text-color-default);
		opacity: 0.6;
	}

	.dbqkbe-list-toolbar-functions {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 6px;
		margin-left: auto;

		.btn,
		.dropdown-toggle {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 30px;
			height: 30px;
			padding: 0;
			border: 0;
			border-radius: 50%;
			background: $color-primary;
			box-shadow: none;

			&::after {
				display: none;
			}

			svg {
				width: 18px;
				height: 18px;
				fill: #fff;
			}
		}
	}
}

// Flat list of folders, documents and files
.dbqkbe-list {
	width: 100%;
}

.dbqkbe-list-empty {
	padding: $global-padding 0;
	font-size: $font-size-small;
	color: color(text-color-default);
	opacity: 0.6;
}

.dbqkbe-list-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	min-height: 56px;
	padding: 10px 12px 10px 7px;
	box-sizing: border-box;
	border-bottom: 1px solid $global-border-color;
	border-left: 5px solid transparent;
	cursor: pointer;

	&:hover {
		background: $color-layer-1;

		.dbqkbe-item-functions .dropdown-toggle {
			opacity: 1;
		}

		.dbqkbe-list-row-arrow svg {
			fill: $color-primary;
		}
	}

	// Drafts and historic documents are shown dimmed (same as the article rows)
	&[data-document-version-state="0"],
	&[data-document-version-state="2"] {
		.dbqkbe-list-row-text {
			opacity: 0.6;
		}
	}
}

.dbqkbe-list-row-icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	margin-right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: $color-layer-2;
	overflow: hidden;

	svg {
		width: 20px;
		height: 20px;
		fill: color(text-color-default);
	}

	img {
		width: 20px;
		height: 20px;
		object-fit: contain;
	}
}

.dbqkbe-list-row-text {
	flex: 1 1 auto;
	min-width: 0;
}

.dbqkbe-list-row-name {
	font-size: $font-size-small;
	font-weight: 600;
	line-height: 20px;
	color: color(text-color-default);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dbqkbe-list-row-description {
	font-size: 12px;
	line-height: 18px;
	color: color(text-color-default);
	opacity: 0.75;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dbqkbe-list-row-tags {
	margin-top: 4px;

	.dbqkba-document-tag {
		display: inline-block;
		margin: 0 4px 2px 0;
	}
}

.dbqkbe-list-row-meta {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-left: 12px;
	font-size: 12px;
	line-height: 18px;
	color: color(text-color-default);
	opacity: 0.6;
	white-space: nowrap;
}

// A narrow right pane (e.g. a small multipanel view) leaves the room for the file name: the file size and update time are hidden.
// The right pane body is the container (see .dbqkbe-detail-pane-body), so this depends on the available width, not on the screen.
@container dbqkbe-detail (max-width: 480px) {
	.dbqkbe-list-row-meta {
		display: none;
	}
}

.dbqkbe-list-row-arrow {
	flex: 0 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 8px;

	svg {
		width: 20px;
		height: 20px;
		fill: color(text-color-default);
	}
}

// The document or file is shown directly on the right pane, without a card of its own (like the folder page)
.dbqkbe-document-container,
.dbqkbe-file-container {
	width: 100%;
	box-sizing: border-box;
}

// ----------------------------------------------
// Responsive: stack panes below ~768px
// ----------------------------------------------

@media (max-width: 768px) {
	.dbqkbe-panes {
		flex-direction: column;
	}

	// The panes are stacked, so there is nothing to resize
	.dbqkbe-tree-resize-handle {
		display: none;
	}

	.dbqkbe-tree-pane {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		position: relative;
		max-height: 40vh;
		border-right: 0;
		border-bottom: 1px solid $global-border-color;
		margin-bottom: $global-margin;
	}

	.dbqkbe-detail-pane {
		flex: 1 1 auto;
		padding-left: 0;
		width: 100%;
	}
}