@use "sass:map";

#zotero-items-pane-container {
	flex-grow: 1;
	flex-shrink: 1;
	min-width: $min-width-items-pane;
	height: 150px;
	min-height: $min-height-items-pane;
}

#zotero-items-pane {
	min-width: $min-width-items-pane;
}

#zotero-items-tree {
	.virtualized-table-body, .drag-image-container {
		padding: 4px 8px 8px;
	}

	.virtualized-table-body {
		scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-background);
	}

	.virtualized-table-header {
		padding-inline-start: 8px;
		padding-inline-end: calc(8px + var(--scrollbar-width, 0px));
		box-sizing: border-box;

		.cell.hasAttachment,
		.cell.numNotes {
			padding: 0;
			text-align: center;
		}

		.first-column {
			&::before {
				content: "";
				display: inline-block;
				width: 8px;
				height: 100%;
				background: transparent;
				position: absolute;
				inset-inline-start: -8px;
				
				@include state(".first-column:hover") {
					background: var(--material-mix-quinary);
				}
				
				@include state(".first-column.dragging") {
					background: var(--material-mix-quarternary);
				}
			}
		}

		.cell:last-child {
			&::after {
				content: "";
				display: inline-block;
				width: calc(var(--scrollbar-width, 0px) + 8px);
				height: 100%;
				background: transparent;
				position: absolute;
				inset-inline-end: calc(-1 * var(--scrollbar-width, 0px) - 8px);
		
				@include state(".cell:hover") {
					background: var(--material-mix-quinary);
				}

				@include state(".cell.dragging") {
					background: var(--material-mix-quarternary);
				}
			}
		}
	}
	
	.virtualized-table, .drag-image-container {
		.row {
			&.odd:not(.selected) {
				background-color: var(--material-stripe);
			}

			&.even:not(.selected) {
				background-color: var(--material-background);
			}

			&.selected {
				border-radius: 0;

				&.first-selected {
					border-top-left-radius: 5px;
					border-top-right-radius: 5px;
				}

				&.last-selected {
					border-bottom-left-radius: 5px;
					border-bottom-right-radius: 5px;
				}
			}
			
			.colored-tag-swatches {
				display: flex;
				
				:root:-moz-locale-dir(rtl) & {
					transform: scaleX(-1);
					flex-direction: row-reverse;
				}
			}

			.icon-item-type + .tag-swatch,
			.icon-item-type + .colored-tag-swatches,
			.annotation-icon + .tag-swatch,
			.annotation-icon + .colored-tag-swatches {
				margin-inline-start: 4px;
			}

			.emoji + .emoji,
			.emoji + .colored-tag-swatches,
			.colored-tag-swatches + .emoji {
				margin-inline-start: 4px;
			}
			
			.tag-swatch {
				display: inline-block;

				&.colored {
					-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
					width: 0.92307692em;
					height: 0.92307692em;
					background:
						url("chrome://zotero/skin/tag-circle.svg") no-repeat center/100%,
						url("chrome://zotero/skin/tag-circle-border.svg") no-repeat center/0;
					fill: currentcolor;

					@each $colorHex, $colorVar in $tagColorsLookup {
						&[data-color="#{$colorHex}"] {
							fill: var($colorVar);
						}
					}

					@include focus-states('.row.selected', '.virtualized-table:focus-within') using($color) {
						@if $color =="white" {
							background: url("chrome://zotero/skin/tag-circle-border.svg") no-repeat center/contain;
							stroke: var(--accent-white);
						}
					}
				}

				&.colored+.colored {
					background:
						url("chrome://zotero/skin/tag-crescent.svg") no-repeat center/100%,
						url("chrome://zotero/skin/tag-crescent-border.svg") no-repeat center/0;
					// RTL: Parent is flipped, so margin can always be on logical left
					margin-left: -0.38461538em;

					@include focus-states using($color) {
						@if $color =="white" {
							background: url("chrome://zotero/skin/tag-crescent-border.svg") no-repeat center/contain;
						}
					}
				}
			}

			.attachment-progress {
				appearance: none;
				background-color: transparent;
				background-image: conic-gradient(var(--color-accent) var(--progress), var(--fill-quarternary) var(--progress), var(--fill-quarternary) 100%);
				mask-image: radial-gradient(circle at center, transparent 5px, black 6px);
				border-radius: 8px;
				border: none;
				display: block;
				height: 16px;
				width: 16px;

				@include state(".row.selected") {
					background-image: conic-gradient(var(--color-accent-text) var(--progress), transparent var(--progress));
					background-image: conic-gradient(var(--accent-white) var(--progress), #ffffff33 var(--progress), #ffffff33 100%);

					@include state(".virtualized-table:not(:focus-within)") {
						background-image: conic-gradient(var(--color-accent) var(--progress), var(--fill-quarternary) var(--progress), var(--fill-quarternary) 100%);
					}
				}

				&::-moz-progress-bar {
					appearance: none;
					background: transparent;
				}
			}
		}
	
		.cell.hasAttachment {
			height: 100%;
			// Don't show ellipsis
			text-overflow: unset;
		}
	
		.cell.primary {
			.retracted {
				width: 12px;
				margin-inline-start: 3px;
			}
		}
		
		.cell.hasAttachment {
			text-overflow: unset;
			align-items: center;
			display: flex;
			justify-content: center;

			.icon-treeitemattachmentpdf {
				background-size: 10px
			}
			
			.icon-missing-file {
				opacity: 0.4;
			}
		}

		.annotation-row {
			.cell {
				font-size: $font-size-small;
				max-width: fit-content;
				// Do not italicize CJK characters
				font-synthesis: none;
				&.title {
					flex-grow: 1;
					flex-basis: 0;
					max-width: fit-content;
					.cell-text::before {
						content: attr(q-mark-open)
					}
					&::after {
						content: attr(q-mark-close)
					}
					.italics {
						font-style: italic;
					}
				}
				&.annotation-comment {
					flex-grow: 2;
					flex-basis: 0;
				}
			}
			&.tight .cell {
				padding: 0 2px 0 0;
			}
		}
		
		.cell .annotation-icon {
			-moz-context-properties: fill;
		}
		
		.numNotes, .hasAttachment {
			text-align: center;

			.cell-text {
				text-align: center;
			}
		}
	}
}

item-tree-menu-bar[inactive] {
	max-height: 0 !important;
	overflow: hidden;
}

$-itemTypesIcons: (
	artwork,
	attachment-epub,
	attachment-epub-link,
	attachment-file, // mapped to document below
	attachment-link,
	attachment-pdf-link,
	attachment-pdf,
	attachment-snapshot,
	attachment-web-link,
	attachment-image,
	attachment-image-link,
	attachment-video,
	attachment-video-link,
	audio-recording,
	bill,
	blog-post,
	book-section,
	book,
	case,
	computer-program,
	conference-paper,
	dataset,
	dictionary-entry,
	document,
	email,
	encyclopedia-article,
	epub,
	film,
	forum-post,
	hearing,
	instant-message,
	interview,
	journal-article,
	letter,
	magazine-article,
	manuscript,
	map,
	newspaper-article,
	note,
	patent,
	podcast,
	preprint,
	presentation,
	radio-broadcast,
	report,
	standard,
	statute,
	thesis,
	tv-broadcast,
	video-recording,
	webpage
);

$-itemTypesMap: (
	"attachment-file": "document"
);

$-attachmentIcons: (
	attachment-epub,
	attachment-epub-link,
	attachment-link,
	attachment-pdf-link,
	attachment-pdf,
	attachment-snapshot,
	attachment-web-link,
	attachment-file,
	attachment-image,
	attachment-video
);

// Non-item objects that can appear in the trash
$-trashableObjectIcons: (
	"collection",
	"search"
);

// Few icons that appear in color in the item tree
$-coloredIcons: (
	cross: --accent-red,
	tick: --accent-green,
	refresh: --fill-secondary,
	plus-circle: --fill-secondary,
	minus-circle: --fill-secondary
);

.icon-item-type {
	width: 16px;
	height: 16px;
}

.icon-attachment-type {
	width: 12px;
	height: 12px;
	padding: 1px;
	box-sizing: content-box;
}

// Due to quirks of the state() mixin, we need two sets of .icon-item-type rules:
// one when the icon is within a virtualized-table, and one when it isn't. We declare
// a mixin here to avoid duplication.

@mixin -icon-item-type-rules($color) {
	.icon-item-type {
		// default icon, for known item types more specific selectors below will apply
		@include svgicon("document", $color, "16", "item-type", true);
	}

	@each $itemTypeIcon in $-itemTypesIcons {
		$itemType: camelCase(str-replace(str-replace($itemTypeIcon, "pdf", "PDF"), "epub", "EPUB"));

		@if map.has-key($-itemTypesMap, $itemTypeIcon) {
			$itemTypeIcon: map.get($-itemTypesMap, $itemTypeIcon);
		}

		.icon-item-type[data-item-type=#{$itemType}] {
			@include svgicon($itemTypeIcon, $color, "16", "item-type", true);
		}
	}
}

// Universal icon rules
@include focus-states using($color) {
	@include -icon-item-type-rules($color);
}

// Selection and focus aware icon rules
.focus-states-target .row {
	@include focus-states using($color) {
		@include -icon-item-type-rules($color);

		@each $itemAttachmentIcon in $-attachmentIcons {
			$itemType: camelCase(str-replace(str-replace($itemAttachmentIcon, "pdf", "PDF"), "epub", "EPUB"));

			.icon-attachment-type[data-item-type=#{$itemType}] {
				@include svgicon($itemAttachmentIcon, $color, "12", "item-type", false);
				background-origin: content-box;
			}
		}

		@each $icon in $-trashableObjectIcons {
			.icon-css.icon-#{$icon} {
				@include svgicon($icon, $color, "16", "collection-tree");
			}
		}

		@each $icon, $colorVar in $-coloredIcons {
			.icon-#{$icon} {
				@include svgicon($icon, "universal", "16");
				@if $color =="white" {
					fill: var(--accent-white);
				}
			
				@else {
					fill: var($colorVar);
				}
			}
		}
	}
}
