/**=====================
     50. Tree  CSS Start
==========================**/
.jstree-container-ul {
	overflow: auto;
}
.jstree-default {
	.jstree-clicked {
		background-color: lighten($primary-color, 42%);
		box-shadow: none;
		color: $dark-color;
	}
	.jstree-themeicon-custom {
		width: 20px !important;
		height: 20px !important;
		line-height: 20px !important;
		margin-right: 8px;
		background-size: contain;
		background-position: center;
		&.icofont-folder {
			background-image: url(../../assets/images/tree/folder.png);
			&:before {
				content: "";
			}
		}
		&.icofont-file-alt {
			&:before {
				content: "";
			}
		}
	}
	.jstree-node {
		&.js-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/js.png);
			}
		}
		&.nodejs-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/nodejs.png);
			}
		}
		&.scss-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/sass.png);
			}
		}
		&.html-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/html.png);
			}
		}
		&.css-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/css.png);
			}
		}
		&.gulp-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/gulp.png);
			}
		}
		&.txt-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/txt.png);
			}
		}
		&.php-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/php.png);
			}
		}
		&.music-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/music.png);
			}
		}
		&.svg-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/svg.png);
			}
		}
		&.json-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/json.png);
			}
		}
		&.pug-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/pug.png);
			}
		}
		&.video-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/mp4.png);
			}
		}
		&.img-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/img.png);
			}
		}
		&.react-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/react.png);
			}
		}
		&.editorconfig-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/editorconfig.png);
			}
		}
		&.env-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/env.png);
			}
		}
		&.xml-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/xml.png);
			}
		}
		&.m-readme-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/m-readme.png);
			}
		}
		&.readme-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/readme.png);
			}
		}
		&.babel-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/babel.png);
			}
		}
		&.vue-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/vue-icon.png);
			}
		}
		&.es-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/es_lint.png);
			}
		}
		&.favicon-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/favicon.png);
			}
		}
		&.web-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/web.png);
			}
		}
		&.laravel-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/laravel.png);
			}
		}
		&.angular-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/angular.png);
			}
		}
		&.ts-icon {
			.jstree-themeicon-custom {
				background-image: url(../../assets/images/tree/ts_file.png);
			}
		}
	}
	.jstree-icon {
		margin-right: 8px;
	}
}
.vakata-context,
.vakata-context ul {
	background-color: $white;
	border: none;
	box-shadow: 0 0 2px 2px $light-semi-gray;
	li {
		a {
			.vakata-contextmenu-sep {
				display: none;
			}
			&:hover {
				background-color: lighten($primary-color, 45%);
				box-shadow: None;
			}
		}
	}
	.vakata-context-separator {
		display: none;
	}
}
/**=====================
     50. Tree CSS Ends
==========================**/
