/*
This file is part of the Meeds project (https://meeds.io/).
Copyright (C) 2020 Meeds Association
contact@meeds.io
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program; if not, write to the Free Software Foundation,
Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/
//
// Tree
// --------------------------------------------------

/*---------- uiTreeExplorer ----------*/
.uiTreeExplorer {
	overflow: auto hidden;
	margin: 0 0 10px 0;
	.node {
		line-height: 19px;
		margin-left: 15px ~'; /** orientation=lt */ ';
		margin-right: 15px ~'; /** orientation=rt */ ';
		padding-top: 7px;
		white-space: nowrap;

		a {
			display: inline;
			color: @textColor;
			cursor: pointer;
			line-height: 22px;
			vertical-align: middle;
            [class*="Mini"] {
                top: -1px
            }
			&:hover {
				text-decoration: none;
				color: @linkColor;
			}
		}

	}

	.SelectedNode a, .nodeSelected a {
		font-weight: bold;
		color: @baseColorDark;
	}

	.treeNodeType {
		padding-left: 22px ~'; /** orientation=lt */ ';
		padding-right: 22px ~'; /** orientation=rt */ ';
	}
    .expandIcon,.collapseIcon,.emptyIcon{
        padding-left: 15px ~'; /** orientation=lt */ ';
        padding-right: 15px ~'; /** orientation=rt */ ';
        position: relative;
        &:before {
            .font-icon();
            position: absolute;
            top: 6px;
            left:0 ~'; /** orientation=lt */ ';
            right:0 ~'; /** orientation=rt */ ';
            font-size: 9px;
        }
    }
	.expandIcon {
		.square(auto);
		display: block;
		margin: 0px;
        &:before {
            content: "\e745";//uiIconColorMiniSquarePlus
        }
	}

	.collapseIcon {
        &:before {
            content: "\e744";//uiIconColorMiniSquareMinus
        }
	}

	.emptyIcon {
        &:before {
            content: "\e743";// uiIconColorMiniSquareBlank
        }
	}
	.loadingTree {
		text-align: center;
		padding: 5px;
	}
	.uiLoadingIconMini {
		padding-right: 5px ~'; /** orientation=lt */ ';
		padding-left: 5px ~'; /** orientation=rt */ ';
		line-height: 16px;
	}

}

/*---------- uiTree ----------*/
.uiTrees{
	background: @primaryBackgroundLight;
	border: 1px solid @borderColor;
	padding: 4px;
	a {
		display: inline;
		color: @textColor;
		width: auto; 
	}
	.treeContainer{
		overflow-x: hidden;
		overflow-y: auto;
		padding-bottom: 12px;
		.node{
			line-height: 19px;
			margin-left: 10px ~'; /** orientation=lt */ ';
			margin-right: 10px ~'; /** orientation=rt */ ';
			padding-top: 7px;
			white-space: nowrap;
			.node {
				padding-left: 10px ~'; /** orientation=lt */ ';
				padding-right: 10px ~'; /** orientation=rt */ ';
			}
			.uiIconNode{
				padding-left: 16px ~'; /** orientation=lt */ ';
				padding-right: 16px ~'; /** orientation=rt */ ';
			  	font-family: @sansFontFamily;
                font-size: @baseFontSize;
				.uiIconNode{
					padding-left: 0px ~'; /** orientation=lt */ ';
					padding-right: 0px ~'; /** orientation=rt */ ';
				}
				i {
					margin-right: 6px ~'; /** orientation=lt */ ';
					margin-left: 6px ~'; /** orientation=rt */ ';
					.size(16px,16px);
					display: inline-block;
					vertical-align: middle;
				}
				.uiCheckbox{
					span{
						text-indent: 9px;
						i{
							top: -1px;
						}
					}
				}
			}
			.nodeSelected{
				font-weight: bold;
			}
		}
	}
    .collapseIcon,.expandIcon,.uiIconEmpty {
        position: relative;
        padding-left: 15px ~'; /** orientation=lt */ ';
        padding-right: 15px ~'; /** orientation=rt */ ';
        &:before {
            .font-icon();
            position: absolute;
            top: 3px;
            left:0 ~'; /** orientation=lt */ ';
            right:0 ~'; /** orientation=rt */ ';
            font-size: 9px;
        }
    }
	.collapseIcon {
		.square(auto);
		margin: 0px;
        &:before {
            content: "\e745";//uiIconColorMiniSquarePlus
        }

	}
	.expandIcon{
        &:before {
            content: "\e744";//uiIconColorMiniSquareMinus
        }
	}
	.uiIconEmpty  {
        &:before {
            content: "\e743";// uiIconColorMiniSquareBlank
        }
	}
}

.uiBox {
	 > .uiTrees {
		border: none;
		.border-radius(0 0 @borderRadiusSmall @borderRadiusSmall);
	}
}

