/* jsTree overrides */

$tree-color-text: $color-text-light-primary
$tree-color-highlight: white
$tree-color-highlight-background: $color-primary

.jstree-default

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

		transition: color 100ms ease-in-out

		+media-xs
			width: 100%

		&[data-node-type="page"]
			font-weight: bold

			.jstree-anchor
				padding: 3px 8px
			.jstree-icon.jstree-themeicon
				display: none

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

		/* Items at top level */
		&.jstree-leaf
			// border-left: 2px solid lighten($color-background-nav, 15%)
			.jstree-icon.jstree-themeicon
				opacity: 1
				width: 24px !important
				color: $color-text-light-primary

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

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

					// Tweaks for specific icons
					&.pi-file-archive
						left: 22px !important
					&.pi-folder
						left: 21px !important
						font-size: .9em !important
					&.pi-film-thick
						left: 22px !important
						font-size: .85em !important

				.jstree-anchor
					border-left: thin solid lighten($color-background-nav, 5%)

			/* color of the icon on an expanded item, like a folder */
			.jstree-ocl,
			.jstree-anchor,
			.jstree-ocl .jstree-icon.jstree-themeicon,
			.jstree-anchor .jstree-icon.jstree-themeicon
				color: $tree-color-highlight !important

			.jstree-anchor:first-of-type
				color: white !important

		/* Closed Folder */
		&.jstree-closed
			// border-left: 2px solid lighten($color-background-nav, 20%)

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

		/* The text of the last level item */
		.jstree-anchor
			width: 100%
			padding-left: 28px
			padding-right: 5px
			height: inherit
			line-height: 26px
			white-space: nowrap
			text-overflow: ellipsis
			overflow: hidden
			border-bottom: thin solid transparent
			transition: none

			+media-xs
				width: 98%
				padding: 0 !important

			.jstree-themeicon
				margin: 0 !important
				font-size: 95% !important

			/* Selected item */
			&.jstree-clicked
				background-color: $tree-color-highlight-background !important
				&:after
					content: '\e83a'
					font-family: 'pillar-font'
					color: $tree-color-highlight
					position: absolute
					right: 7px
					top: 1px

				li
					a.jstree-anchor:after
						content: ''

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

			.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 !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: white !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: 26px
			left: 5px

.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: 28px !important

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

.jstree-leaf[aria-selected='true']
	a.jstree-anchor.jstree-clicked
		background-color: rgba($tree-color-highlight-background, .5) !important

a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
	background-color: rgba($tree-color-highlight-background, .7) !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

a.jstree-anchor+ul
	border:
		top: none !important
		bottom: none !important
	a.jstree-anchor
		color: darken($color-text-light-primary, 10%) !important

		&.jstree-hovered,
		&.jstree-clicked
			color: white !important

		&+ul
			a.jstree-anchor
				color: darken($color-text-light-primary, 10%) !important

				&.jstree-hovered,
				&.jstree-clicked
					color: white !important


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

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

/* /jsTree overrides */