/* wc.ui.tree.scss */
@import 'mixins-common';

[role='tree'] {
	[role='group'] {
		display: none;
		padding-left: $wc-tree-indent;

		&.wc_tree_root {
			display: block;
			padding-left: 0;
		}
	}

	[aria-expanded='true'] > [role='group'] {
		display: block;
	}
}

button[role='treeitem'],
[role='treeitem'] > button {
	width: 100%;
}

[role='treeitem'] {
	@include border-box;
	display: block;
	width: 100%;

	> .wc_leaf_vopener {
		width: $wc-icon-wider;

		+ button {
			width: calc(100% - $wc-icon-wider);
		}
	}
}

.wc_leaf_vopener,
.wc_leaf_img,
.wc_leaf_hopener {
	display: inline-block;
}

.wc_leaf_vopener,
.wc_leaf_noimg {
	width: $wc-icon-wider;

	&:before {
		text-align: left;
		width: $wc-icon-normal;
	}
}


.wc_leaf_vopener { // the vertical opener button and its span placeholder equivalent.
	@include border-box; // required for the span.
	padding: $wc-tree-item-pad-t 0 $wc-tree-item-pad-b $wc-tree-item-pad-l;
	text-align: left;
}

// The icon container
.wc_leaf_img {
	padding: $wc-tree-item-pad-t 0 $wc-tree-item-pad-b;

	img {
		max-height: $wc-icon-normal;
		max-width: $wc-icon-normal;
	}
}

.wc_leaf_name {
	padding: $wc-tree-item-pad-t $wc-tree-item-pad-r $wc-tree-item-pad-b 0;
}

// htree branch opener.
.wc_leaf_hopener {
	display: none;
	text-align: right;

	// &:before {
	// 	text-align: right;
	// }
}
