styles.css

/*

This CSS file will be included with your plugin, and
available in the app when your plugin is enabled.

If your plugin does not need CSS, delete this file.

*/

.hierarchy-title-outer {
	width: fit-content;
	text-transform: none;
	cursor: var(--cursor);
	align-items: center;
	padding: var(--nav-item-padding);
	padding-inline-start: var(--size-4-2);
    position: relative;
	font-weight: var(--nav-heading-weight);
	letter-spacing: unset;
	font-size: var(--font-adaptive-normal);
	color: var(--text-normal);
	display: flex;
    border-radius: var(--radius-s);
}

.hierarchy-wrapper {
	margin-bottom: var(--size-4-18);
	border-top: 1px solid var(--background-modifier-border);
}

.hierarchy-title-outer:hover {
	text-transform: none;
    color: var(--nav-item-color-hover);
    background-color: var(--nav-item-background-hover);
}

.hierarchy-title-outer.hierarchy-expanded  {
	color: var(--text-normal);
}

.hierarchy-title-outer.hierarchy-expanded:hover {
	color: var(--nav-item-color-hover);
    background-color: var(--nav-item-background-hover);
}


.hierarchy-title-outer.hierarchy-collapsed {
	color: var(--nav-heading-color-collapsed);
}


.hierarchy-title-outer.hierarchy-collapsed:hover {
	color: var(--nav-heading-color-collapsed-hover);
}

.hierarchy-title-outer.hover {
	color: var(--nav-item-color-active);
	background-color: var(--nav-item-background-active);
}

.hierarchy-list-outer {
	padding-inline-start: var(--size-4-2);
	margin-top: var(--size-4-2);
	display: grid;
	transition: all var(--anim-duration-superfast);
}

.hierarchy-list-outer.hierarchy-expanded {
	grid-template-rows: 1fr;
}

.hierarchy-list-outer.hierarchy-collapsed {
	grid-template-rows: 0fr;
}

.hierarchy-list {
	overflow: hidden;
}

.hierarchy-count-outer {
	display: grid;
	margin-inline-start: var(--size-2-3);
	padding-inline-start: var(--size-4-1);
}

.hierarchy-count {
	color: var(--text-faint);
	font-size: max(var(--font-ui-small),var(--font-smallest));
}