/* CSS Tree menu styles */
.tree
{
	width:100%;
	padding:0;

	> ol
	{
		padding: 0rem 0 0 0rem;
		margin:0;
		//width: 300px;
		//min-width: $builder-right-panel-width + 15;
		//margin:0 0.5rem;
		font-size:12px;
		color:var(--bs-body-color);

		li 
		{ 
			position: relative; 
			//margin-left: -15px;
			margin-bottom: 0.1rem;
			list-style: none;
			color:var(--bs-body-color);
			overflow:hidden;
			
			> label {
				html[data-bs-theme="dark"] & { 
					//color: #333;
					//filter: invert(100%);
				}
			}
			
			&:hover
			{
				color:#007bff;
			}
			
			&.active
			{
				//background-color:var(--bs-link-color);
				//color:#fff;
				> label > span, > a > span  
				{
					//color:#007bff;
				}
			}
		}
		
		li.file
		{
			border:1px solid transparent;
			
			&:hover, &.active {
				//background-color:rgba(var(--bs-link-color-rgb), 0.05);
				//color:var(--bs-link-color);
				color:var(--bs-link-hover-color);
			}
			
			&:hover {
				background-color:rgba(var(--bs-link-color-rgb), 0.05);
				//border: 1px solid rgba(var(--bs-link-color), 0.1);
				
				.file-actions {
					display:block;
				}
			}
			
			> label
			{
				background-image: url(../../../js/vvvebjs/icons/file.svg);
				background-position:8px 4px;
				background-size:19px 19px;
				background-repeat:no-repeat;
				cursor: pointer;
				display: block;
				padding-left: 33px;
				margin:0;
				font-size:12px;
				line-height:28px;
				max-height:2rem;


				&:hover
				{
					//color:var(--bs-link-color);
				}
			}
			
			.file-actions {
				display:none;
				position:absolute;
				//background-color: var(--bs-body-bg);				
				top:0px;
				right:2px;

				.btn {
					padding:0rem 0.2rem;
					margin-right:1px;
					font-size:0.875rem;
					line-height:1;
					border-radius:4px;
					--bs-btn-border-color: rgba(var(--bs-link-color-rgb), 0.25);
				}
			}
		}
		
		li.folder
		{
			> label
			{
				//padding-left:38px;
			}
		}		
		
		li.page
		{
			> label
			{
				background-image: url(../../../js/vvvebjs/icons/post.svg);
			}
		}		
		
		li.product
		{
			> label
			{
				background-image: url(../../../js/vvvebjs/icons/product.svg);
			}
		}

		li.url
		{
			> label
			{
				background-image: url(../../../js/vvvebjs/icons/panel.svg);
			}
		}		
		
		li.notemplate
		{
			.duplicate, .rename, .delete {
				display:none;
			}
		}

		li[data-global]
		{
			.rename, .delete {
				display:none;
			}
		}

		li input
		{
			position: absolute;
			left: 0;
			margin-left: 0;
			opacity: 0;
			z-index: 2;
			cursor: pointer;
			height: 2em;
			width: 2em;
			top: 0;
			
			 + ol
			{
				background: url(../../../js/vvvebjs/icons/arrow-right.svg) 8px .8rem no-repeat;
				background-size:12px 12px;
				margin: -1.9rem 0 0 0rem;
				padding: 2rem 0 0 2rem;
				height: 0;
				
				> li { display: none; margin-left: -14px !important; padding-left: 1px; }
			}
		}
		
		li label
		{
			background: url(../../../js/vvvebjs/icons/folder.svg) 24px 1px no-repeat;
			background-size:20px 20px;
			cursor: pointer;
			display: block;
			padding-left: 50px;
			margin:0px;
			font-size:12px;
			line-height:24px;

			/*
			p {
				margin: 0;
				display:none;
				color: #999;
				margin-left: 1rem;
			}
			
			&:hover {
				p {
					display: inline-block;				
				}
			}
			*/
		}

		li input:checked + ol
		{
			background: url(../../../js/vvvebjs/icons/arrow-down.svg) 8px .7rem no-repeat;
			background-size:12px 12px;
			margin: -2.5em 0 0 0rem;
			padding: 2rem 0 0 2.5rem;
			height: auto;

			> li { display: block; margin: 0 0 0.1em;  /* 2px */}
			> li:last-child { margin: 0 0 0.3em; /* 1px */ }
		}
	}
}

//dark mode support for svg images 
[data-bs-theme="dark"] {
	.tree > ol li.active label {
		color: var(--bs-primary-border-subtle);
	}
	
	.tree > ol li label {
		filter:invert(93%) hue-rotate(180deg);
		color: var(--bs-dark);
	}

	.tree > ol li.file .file-actions .btn {
		--bs-btn-color: var(--bs-primary-border-subtle);
		--bs-btn-border-color: var(--bs-link-hover-color);
	}
}