@import "ui-variables";
@import "ui-mixins";

.tree-view {
	font-size: @font-size;
	background: @tree-view-background-color;
	.ui-inset-shadow;
	position: relative;
	padding-bottom: 108px;

	// Let the selector war commence!!
	.list-item.list-item.list-item.list-item {
		line-height: 20px;
	}

	box-shadow: none;
	--webkit-font-smoothing: none;

	&:after {
		pointer-events: none;
		background-image: url('data:image/png;base64,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');
		background-position: bottom left;
		background-repeat: no-repeat;
		width: 100%;
		height: 200px;
		position: fixed;
		bottom: 0;
		z-index: -4;
		left: 0;
		content: '';
		image-rendering: pixelated;
	}

	.selected::before {
		width: 0;
		height: 0;
		margin-left: 2px;
		margin-right: 2px;
	}

	.directory.selected > .header > .name {
		position: relative;
		color: white;
		&:after {
			content: '';
			width: calc(100% ~"-" 15px);
			height: 120%;
			position: absolute;
			left: 18px;
			z-index: -2;
			border: 1px dotted gray;
			top: -1px;
			background-color: navy;
		}
	}
	.file.selected > span {
		position: relative;
		color: white;
		&:after {
			content: '';
			width: calc(100% ~"-" 15px);
			height: 120%;
			position: absolute;
			left: 18px;
			z-index: -2;
			border: 1px dotted gray;
			top: -1px;
			background-color: navy;
		}
	}
}

.tree-view-resizer {
	.tree-view-resize-handle {
		width: 8px;
		background: #D3D0C7;
		border-left: 1px solid gray;
	}
}

.focusable-panel {
	opacity: 1;

	&:focus {
		.selected::before {
			background: @background-color-selected;
			color: white;
		}
	}
}

.directory.entry {
	&.expanded {
		.header {
			&::before {
				// Plus sign.
				content: '';
				left: 1px;
				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+/v78AAABCS8n0AAAAFElEQVQI12MIDXVgQIZeK1D4IHkAbMQGB9awVs4AAAAASUVORK5CYII=');
				background-position: center center;
				background-repeat: no-repeat;
				height: 9px !important;
				width: 12px !important;
				image-rendering: pixelated;
				z-index: 1;
			}
			.icon-file-directory::before {
				// Directory icon.
				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAZ0lEQVR4AZWPhw0AMQgD2fXX8kyM9B3p0ouVjg+IXZsCkCwdEwAHvHUAYsoGNRl9gIHcDzObAowApPl4rADd9P6v4XvWPuDpAWD8Byo8Q4rUJYAPN10BwJRugHCnwGwAhGwugA1tAzeXZSkYJ9mbPwAAAABJRU5ErkJggg==');
				content: '';
				image-rendering: pixelated;
				z-index: 1;
				transform: translateY(1px);
			}
		}
	}
	&.collapsed {
		.header {
			&::before {
				// Minus sign.
				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+/v78AAABCS8n0AAAAGElEQVQI12MIDXVgAMMGCPZagWADIUgeAJDECAeFz1XEAAAAAElFTkSuQmCC') !important;
				background-position: center center;
				background-repeat: no-repeat;
				content: '' !important;
				height: 9px !important;
				width: 12px !important;
				image-rendering: pixelated;
			}
			.icon-file-directory::before {
				// Directory icon.
				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAYElEQVR4AZ2NxxWAMAzF2DVreSatkxvpPRTDf8KnCB3u44ogcoyEPQnhhbXWORISeHDi/8Ds1FqnC87xhoBJzS7IEygF+lUXUBb4UUBZYL+XAg+vNwGMhiLET7cu6PdH8BLwRqwGgozlAAAAAElFTkSuQmCC');
				content: '';
				image-rendering: pixelated;
				transform: translateY(1px);
			}
		}
	}
}

/* filetypes */

.icon-file-text::before {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAT0lEQVR42mNggIKGhob/xGAGXAAkSQgcOHAAtyHEGgACWA0hxgCgMnRMmgHILsFpAL4AJMqAURfQ0AVEG0CxCygyACRBLMYwAEs6JwYzAAB9sXFvgXLcRQAAAABJRU5ErkJggg==');
	background-position: center center;
	content: '';
	height: 16px;
	width: 16px;
	image-rendering: pixelated;
}

.icon-file-media::before {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAj0lEQVR42o2SARIAIQRFO7qjdbN2FRIRO3/ameXtRw0ARkUtCvz4it57DKkCMDTkfxmARwWw8rcGyQEAGtndJ2oWsRNdbFvABPs3DXDFFsDJ+hHArTh0YAA0PC6OAeKAZsDrY7BqMXcw24UFksmfM8od6LBbeDq4rbIMsCs8Lk8FULnSVwBPvCIHyGwnkvgAtFsewSfEAL4AAAAASUVORK5CYII=');
	background-position: center center;
	content: '';
	height: 16px;
	width: 16px;
	image-rendering: pixelated;
}

.icon-file-binary::before {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgklEQVR42r2SSw7AIAhEOTpH42ZU/CJB1IUlnQSJeQ4FQETeCaKQC1EQUQw5AUgsITtAumJ1B9BO/gGcTEVNh11AwrpqLpQbH3DV0hJQX8ipuKp1KWk3gQMFAJxhuo13LTDkr9SA+wFKPgHk0DT+AXfbAhg52knMq2qBkdzFcnY/1AerkX9hkHz/KAAAAABJRU5ErkJggg==');
	background-position: center center;
	content: '';
	height: 16px;
	width: 16px;
	image-rendering: pixelated;
}

.icon-book::before {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAARElEQVR42mNgQID/RNJYwX8QaGhowEtjNQRZklgaqwHEgAMHDtDYAKgkunMHyAXorhl1Ab1cQLYBIAliMa5c+Z8EjAIAc/wzNSUthNwAAAAASUVORK5CYII=');
	background-position: center center;
	content: '';
	height: 16px;
	margin-left: 2px;
	margin-right: 3px !important; // This counteracts the default 5px right margin
	width: 16px;
	image-rendering: pixelated;
}

.icon-repo::before {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAsklEQVR4AZ2R1wGDMAwFtRKrsIJX4lMrsMpbyblEQlF6eS643IkUm99kXbUk+VmQ23SmQzDXtQ/f9633My3zYYStEbihGbTkVTdrTw86gFw9o9VrL8MpmkKntyO9Np8EHyeFokNgrtpFA9Bx6iiiEKgcNAmaGYx0QSVcOCIWRbPogrpASqjPA/aVkHR/g7m6UOsQimZe2v9QxH06Te//dDqS1+fuNMwhDM/u2p4Frrr9kRMAOsBw6rbrYwAAAABJRU5ErkJggg==');
	background-position: center center;
	content: '';
	height: 16px;
	width: 16px;
	image-rendering: pixelated;
}

/* lines */

ol.entries {
	position: relative !important;
}

ol.entries > li {
	&::after {
		width: 0;
		top: -11px;
		left: 24px;
		bottom: 12px;
		position: absolute;
		border-left: 1px dotted gray;
		content: '';
		display: block;
	}
	&.file::after {
		left: 7px;
	}
	&:last-child::after {
		bottom: auto;
		height: 19px;
	}
}

.icon::before {
	top: 4px;
}

.entry {
	position: relative;
}

.entry.file::before {
	&.selected {
		background: none;
	}
	position: absolute;
	background: none !important;
	border-bottom: 1px dotted gray;
	width: 11px;
	height: 0;
	top: 9px;
	left: 7px;
}

.entry.directory::before {
	position: absolute;
	background: none !important;
	border-bottom: 1px dotted gray;
	width: 11px;
	height: 0;
	top: 10px;
	left: 22px;
}