/* jsTree overrides */
$tree-color-text: $color-text-dark-primary
$tree-color-highlight: $color-primary-accent
$tree-color-highlight-background: $white
$tree-color-highlight-background-text: $primary

.jstree-default
	/* list item */
	.jstree-node
		+media-xs
			width: 100%
		background-image: none !important
		border: none
		color: $tree-color-text
		margin: 0 !important
		max-width: 100% // Needed for ellipsis on long names
		position: relative

		&[data-node-type="asset"],
		&[data-node-type="texture"],
		&[data-node-type="hdri"]
			.jstree-anchor
				padding-right: 20px

			&[is_free='true']
				.jstree-anchor
					padding-right: initial

					&:after
						color: $tree-color-highlight
						content: '\e84e' !important
						display: block

		&[data-node-type="page"],
		&[data-node-type="blog"]
			color: darken($tree-color-highlight, 5%)
			font-weight: bold

			.jstree-anchor
				padding: 5px 8px 1px 8px

				&:after
					top: 3px !important

			.jstree-icon
				display: none

		/* Brief moment when a node is being loaded */
		&.jstree-loading
			padding: 0

		/* Items at top level */
		&.jstree-leaf
			.jstree-icon
				opacity: 1
				width: 24px !important

				&.pi-image
					font-size: .85em !important

		/* Open Folder */
		&.jstree-open
			/* Text of children for an open tree (like a folder) */
			.jstree-children > .jstree-node
				padding-left: 16px !important

				.jstree-icon:empty
					left: 20px !important

					// Tweaks for specific icons
					&.pi-file-archive
						left: 25px !important
					&.pi-folder
						left: 20px !important
						font-size: .9em !important
					&.pi-splay
						left: 20px !important
						font-size: .85em !important

				.jstree-anchor
					// box-shadow: inset 1px 0 0 0 $color-background

		/* Closed Folder */
		// &.jstree-closed

		&.jstree-open .jstree-icon.jstree-ocl,
		&.jstree-closed .jstree-icon.jstree-ocl
			float: left
			min-width: 30px
			opacity: 0
			position: absolute
			z-index: 1

		/* The text of the last level item */
		.jstree-anchor
			+media-xs
				padding: 0 !important
				width: 98%
			border: none
			font-size: 13px
			height: inherit
			line-height: 24px
			overflow: hidden
			padding-left: 28px
			padding-right: 10px
			text-overflow: ellipsis
			white-space: nowrap
			width: 100%

			// Little arrow on the right
			&:after
				content: '\e83a' !important
				font-family: 'pillar-font'
				color: $tree-color-highlight-background-text
				display: none
				position: absolute
				right: 7px
				top: 1px

			// Icon, not selected
			.jstree-icon
				color: $tree-color-text
				margin: 0 !important

			/* Selected item */
			&.jstree-clicked
				background-color: $tree-color-highlight-background !important
				color: $tree-color-highlight-background-text !important
				font-weight: bold

				&:after
					display: block
					color: $tree-color-highlight-background-text !important

				.jstree-ocl,
				.jstree-icon
					color: $tree-color-highlight-background-text

				/* hover an active item */
				&.jstree-hovered
					background-color: lighten($tree-color-highlight-background, 10%) !important
					box-shadow: none
					color: $tree-color-highlight-background-text !important

				&.jstree-hovered .jstree-icon
					color: $tree-color-highlight-background-text !important

			.jstree-hovered
				background-color: rgba($tree-color-highlight, .1) !important

	.jstree-leaf .jstree-clicked
		width: 100% !important

	/* active item text + icon */
	.jstree-clicked,
	.jstree-clicked > .jstree-ocl
		color: $tree-color-highlight-background-text !important
		background-color: transparent !important
		border-radius: 0
		box-shadow: none
		border-bottom: thin solid transparent

	.jstree-ocl:before
		+media-xs
			font-weight: bold
			font-size: 100%
			top: 10%
			left: 46%

	.jstree-hovered,
	.jstree-hovered .jstree-ocl
		background-color: transparent !important
		box-shadow: none
		color: $tree-color-highlight-background-text !important

	/* Folder that you click to collapse/expand */
	.jstree-icon
		background-image: none !important
		position: relative
		width: 20px !important
		text-align: left !important
		position: absolute

		&:empty
			line-height: 24px
			left: 3px

	&.is_subscriber
		.jstree-node
			&[is_free='true']
				.jstree-anchor
					padding-right: initial

					&:after
						display: none !important

	&.blog
		.jstree-anchor
			padding: 6px 6px 6px 12px

			&:hover
				color: $tree-color-highlight

			&.post
				border-bottom: thin solid $color-background-dark

			&.jstree-clicked
				&.post
					background-color: transparent !important

					&:after
						top: 8px
						color: $tree-color-highlight !important

					.tree-item-info
						color: $color-text

					.tree-item-title
						color: $tree-color-highlight

		.tree-item
			line-height: initial
			padding-right: 10px

			&-title
				font-size: 1.2em
				overflow: initial
				text-overflow: initial
				white-space: normal

			&-info
				color: $color-text-dark-secondary
				display: block
				font-size: .8em
				padding: 5px

			&-thumbnail
				align-items: center
				background-color: $color-background
				border-radius: 3px
				color: $color-text-dark-secondary
				display: flex
				float: left
				height: 70px
				justify-content: center
				margin: 0 10px 0 -5px
				width: 70px

				img
					height: 70px
					width: 70px


.jstree-loading
	padding: 5px
	color: $color-text-light-secondary

.jstree-default-responsive
	.jstree-anchor
		+media-sm
			font-weight: normal !important
			text-shadow: none !important

.ps-active-y
	.jstree-default .jstree-node
		max-width: 97%

.jstree-default .jstree-node.jstree-closed .jstree-icon.jstree-ocl + .jstree-anchor,
.jstree-default .jstree-node.jstree-open .jstree-icon.jstree-ocl + .jstree-anchor
	padding-left: 24px !important

/* hovered text */
.jstree-default .jstree-hovered,
.jstree-default .jstree-open .jstree-hovered,
.jstree-default .jstree-hovered .jstree-icon
	color: $tree-color-highlight !important


a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
	background-color: rgba($tree-color-highlight-background, .8) !important
	color: $tree-color-highlight-background-text !important

a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
	background-color: rgba($tree-color-highlight-background, .8) !important
	color: $tree-color-highlight-background-text !important

i.jstree-icon.jstree-ocl
	color: rgba($tree-color-text, .5) !important
	height: 26px !important
	+media-xs
		height: 40px !important

.jstree-children .jstree-open i.jstree-icon.jstree-ocl
	height: 26px !important

/* /jsTree overrides */