/* 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 // Make room for the angle-right icon.

			&[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"]
			font-weight: bold

			.jstree-anchor
				padding: 0 5px

				&: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: 25px !important

				&:before
					box-shadow: inset 5px 0 0 rgba($tree-color-text, .1)
					content: ' '
					height: 100%
					width: 2px
					position: absolute
					left: 8px

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

		// Invisible element to expand/collapse folders.
		&.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
			overflow: hidden
			padding-left: 25px
			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
				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
					box-shadow: none
					color: $tree-color-highlight-background-text !important

				&.jstree-hovered .jstree-icon
					color: $tree-color-highlight-background-text !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
		box-shadow: none

	.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: 1px

	&.is_subscriber
		.jstree-node
			&[is_free='true']
				.jstree-anchor
					padding-right: initial
					&:after
						display: none !important

.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: 25px !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
	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
	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 */
