:root {
	--blxmenu-ico-folder-home: url('../images/ico-folder-home.svg');
	--blxmenu-ico-folder-closed: url('../images/ico-folder-closed.svg');
	--blxmenu-ico-folder-open: url('../images/ico-folder-open.svg');
	--blxmenu-ico-folder-scoped: url('../images/ico-folder-scoped.svg');
	--blxmenu-ico-folder-scoped-open: url('../images/ico-folder-scoped-open.svg');

	--blxmenu-ico-external-link: url('../images/ico-external-link.svg');

	--blxmenu-ico-arrow-left: url('../images/ico-arrow-left.svg');
	--blxmenu-ico-arrow-top-left: url('../images/ico-arrow-top-left.svg');

	--blxmenu-ico-eye-open: url('../images/ico-eye-open.svg');
	--blxmenu-ico-eye-closed: url('../images/ico-eye-closed.svg');

	--blxmenu-ico-file-plus: url('../images/ico-file-plus.svg');
	--blxmenu-ico-folder-remove: url('../images/ico-folder-remove.svg');

	--blxmenu-ico-reload: url('../images/ico-reload.svg');

	--blxmenu-icon-size: 1.25rem;
	--blxmenu-icon-gap: 0.35rem;

	--blxmenu-item-gap: 0.125rem;

	--blxmenu-icon-color: var(--tools-color);
}

/* CONTAINER */
.blxmenu.b-root {
	position:relative;

	padding: 0.5rem 0 1rem 0;
}
.blxmenu.b-container {
	position:relative;

	display: flex;
	flex-direction: column;
	gap: var(--blxmenu-item-gap);
}
.blxmenu.b-container.b-namespace::after {
	position: absolute;
	left: 0;
	right: 0;

	content: "";

	width: calc(var(--blxmenu-icon-size) * 0.5);
	height: 100%;

	border-right: 1px solid #ccc;
}

/* MENU */
.blxmenu.b-menu {
	position:relative;
	
	display: flex;
	flex-direction: column;

	padding: 0;
	margin: 0;

	list-style: none;
}

/* HEAD */
.blxmenu.b-head {
	position:relative;

	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--blxmenu-icon-gap);

	width: 100%;
}

/* TITLE */
.blxmenu.b-title {
	position:relative;

	display: flex;
	align-items: center;
	gap: var(--blxmenu-icon-gap);

	min-height: 1.5rem;

	margin-bottom: var(--blxmenu-item-gap);
}

/* ITEM */
.blxmenu.b-item {
	position:relative;

	display: flex;
	align-items: center;
	gap: var(--blxmenu-icon-gap);

	min-height: 1.5rem;
}
.blxmenu.b-item.b-link {
	position:relative;

	display: flex;
	align-items: center;

	min-height: 1.5rem;
}

/* BACKLINK */
.blxmenu.b-backlink {
	position:relative;

	display: flex;
	align-items: center;
	gap: var(--blxmenu-icon-gap);

	min-height: 1.5rem;
}
.blxmenu.b-backlink.b-link {
	position:relative;

	display: flex;
	align-items: center;

	min-height: 1.5rem;
}

/* TOGGLE */
.blxmenu.b-toggle {
	position:relative;

	min-width: 1rem;
	min-height: 1rem;

	background-color: var(--blxmenu-icon-color);
	
	mask-image: var(--blxmenu-ico-eye-closed);
	-webkit-mask-image: var(--blxmenu-ico-eye-closed);
}
[data-hidden-items-visibility="visible"] .blxmenu.b-toggle {
	mask-image: var(--blxmenu-ico-eye-open);
	-webkit-mask-image: var(--blxmenu-ico-eye-open);
}

/* REBUILD */
.blxmenu.b-rebuild {
	position:relative;

	min-width: 1rem;
	min-height: 1rem;

	background-color: var(--blxmenu-icon-color);
	
	mask-image: var(--blxmenu-ico-reload);
	-webkit-mask-image: var(--blxmenu-ico-reload);
}
.blxmenu.b-rebuild:disabled {
	cursor: not-allowed;
}

/* HEAD TOOLS CONTAINER */
.blxmenu.b-head .blxmenu.b-tools {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* INDENTATION */
.blxmenu.b-indentation {
	position: relative
}
.blxmenu.b-indentation::after {
	position: absolute;
	left: 0;
	right: 0;

	content: "";

	width: calc(var(--blxmenu-icon-size) * 0.5);
	height: 100%;

	border-right: 1px solid #ccc;
}

/* ICONS */
.blxmenu.b-icon {
	width: var(--blxmenu-icon-size);
	height: var(--blxmenu-icon-size);

	content: "";

	mask-size: contain;
	-webkit-mask-size: contain;
	mask-position: center;
	-webkit-mask-position: center;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}
.blxmenu.b-icon.home {
	background-color: var(--blxmenu-icon-color);

	mask-image: var(--blxmenu-ico-folder-home);
	-webkit-mask-image: var(--blxmenu-ico-folder-home);
}

.blxmenu.b-icon.closed {
	background-color: var(--blxmenu-icon-color);
	
	mask-image: var(--blxmenu-ico-folder-closed);
	-webkit-mask-image: var(--blxmenu-ico-folder-closed);
}
.blxmenu.b-icon.open {
	background-color: var(--blxmenu-icon-color);
	
	mask-image: var(--blxmenu-ico-folder-open);
	-webkit-mask-image: var(--blxmenu-ico-folder-open);
}

.blxmenu.b-icon.scoped,
.blxmenu.b-icon.scoped.closed {
	background-color: var(--blxmenu-icon-color);
	
	mask-image: var(--blxmenu-ico-folder-scoped);
	-webkit-mask-image: var(--blxmenu-ico-folder-scoped);
}
.blxmenu.b-icon.scoped.open {
	background-color: var(--blxmenu-icon-color);
	
	mask-image: var(--blxmenu-ico-folder-scoped-open);
	-webkit-mask-image: var(--blxmenu-ico-folder-scoped-open);
}

.blxmenu.b-icon.external-link {
	background-color: var(--blxmenu-icon-color);
	
	mask-image: var(--blxmenu-ico-external-link);
	-webkit-mask-image: var(--blxmenu-ico-external-link);
}

.blxmenu.b-icon.ico-arrow-left {
	background-color: var(--blxmenu-icon-color);
	
	mask-image: var(--blxmenu-ico-arrow-left);
	-webkit-mask-image: var(--blxmenu-ico-arrow-left);
}

.blxmenu.b-icon.arrow-left {
	background-color: var(--blxmenu-icon-color);
	
	mask-image: var(--blxmenu-ico-arrow-left);
	-webkit-mask-image: var(--blxmenu-ico-arrow-left);
}
.blxmenu.b-icon.arrow-top-left {
	background-color: var(--blxmenu-icon-color);
	
	mask-image: var(--blxmenu-ico-arrow-top-left);
	-webkit-mask-image: var(--blxmenu-ico-arrow-top-left);
}

.blxmenu.b-icon.eye-open {
	background-color: var(--blxmenu-icon-color);
	
	mask-image: var(--blxmenu-ico-eye-open);
	-webkit-mask-image: var(--blxmenu-ico-eye-open);
}
.blxmenu.b-icon.eye-close {
	background-color: var(--blxmenu-icon-color);
	
	mask-image: var(--blxmenu-ico-eye-close);
	-webkit-mask-image: var(--blxmenu-ico-eye-close);
}

.blxmenu.b-icon.file-plus {
	background-color: var(--blxmenu-icon-color);
	
	mask-image: var(--blxmenu-ico-file-plus);
	-webkit-mask-image: var(--blxmenu-ico-file-plus);
}
.blxmenu.b-icon.folder-remove {
	background-color: var(--blxmenu-icon-color);
	
	mask-image: var(--blxmenu-ico-folder-remove);
	-webkit-mask-image: var(--blxmenu-ico-folder-remove);
}
.blxmenu.b-icon.reload {
	background-color: var(--blxmenu-icon-color);
	
	mask-image: var(--blxmenu-ico-reload);
	-webkit-mask-image: var(--blxmenu-ico-reload);
}


/* DECORATION*/
.blxmenu button {
	color: var(--bs-link-color);
	text-decoration: none;
}
.blxmenu button:hover {
	text-decoration: underline;
}


/* META */
.blxmenu.b-item.b-meta,
.blxmenu.b-item.b-compliance,
.blxmenu.b-item.b-hidable {
	display: none;

	opacity: 0.5;
}
[data-hidden-items-visibility="visible"] .blxmenu.b-item.b-meta,
[data-hidden-items-visibility="visible"] .blxmenu.b-item.b-compliance,
[data-hidden-items-visibility="visible"] .blxmenu.b-item.b-hidable {
	display: flex;
}