styles.css

.obs-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: var(--radius-s);

	transition: background-color 300ms;
}

.obs-icon_size-xs svg {
	height: var(--icon-xs);
	width: var(--icon-xs);
	stroke-width: var(--icon-xs-stroke-width);
}

.obs-icon_size-s svg {
	height: var(--icon-s);
	width: var(--icon-s);
	stroke-width: var(--icon-s-stroke-width);
}

.obs-icon_size-m svg {
	height: var(--icon-m);
	width: var(--icon-m);
	stroke-width: var(--icon-m-stroke-width);
}

.obs-icon_size-xl svg {
	height: var(--icon-xl);
	width: var(--icon-xl);
	stroke-width: var(--icon-xl-stroke-width);
}

.clickable {
	border-radius: var(--radius-s);
	padding: var(--size-2-2);
	cursor: var(--cursor-link);

	transition: scale 100ms;
}

.clickable_bypass {
	border-radius: var(--radius-s);
	padding: var(--size-2-2);
}

.clickable[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}

.clickable:not([aria-disabled="true"]):hover {
	background: rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 5px 0px #00000017;
}

.clickable:not([aria-disabled="true"]):active {
	scale: 0.8;
}

.collapsible-div {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.mf-root {
	padding: var(--size-2-2);
}

.file-node {
	display: flex;
	flex-direction: column;
}

.file-node_kind-parent {
	flex-direction: column-reverse;
}

.file-node_kind-parent {
	flex-direction: column-reverse;
}

.file-node_kind-child {
	flex-direction: column;
}

.file-node__container {
	display: flex;
	flex-direction: row;
	padding: var(--size-2-2) var(--size-2-2);
	margin-left: 0px;
	transition:
		border-radius 300ms,
		background-color 300ms;
	gap: var(--size-2-2);
	align-items: center;
	color: var(--nav-item-color);

	cursor: var(--cursor-link);

	border-radius: var(--radius-s);
}

.file-node__container_indented {
	border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

.file-node__container_kind-root {
	font-weight: var(--font-semibold);
	font-size: var(--font-ui-small);
	border-radius: var(--radius-s);
	padding-right: var(--size-4-1);
	background-color: var(--background-primary);
	box-shadow: 0 0 0 var(--border-width) var(--background-modifier-border);
}

.file-node__content-wrapper {
	width: 100%;
	overflow: hidden;
}

.file-node__container_highlight {
	background: var(--nav-item-background-active);
}

.file-node__path {
	font-size: var(--font-smallest);
	color: var(--text-faint);

	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-wrap: anywhere;
	overflow: hidden;
}

.file-node__content {
	display: flex;
	gap: var(--size-2-2);
}

.file-node__content-last-icon {
	opacity: 0.4;
}

.file-node__content-text {
	line-height: var(--line-height-tight);
	font-size: var(--nav-item-size);

	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-wrap: anywhere;
	overflow: hidden;
}

.file-node__content-side {
	flex: 1 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	opacity: 0;
	transition: opacity 300ms;
}

.file-node__container_highlight .file-node__content-side {
	opacity: 1;
}

.file-node__relatives {
	display: flex;
	flex-direction: row;
}

.file-node__relatives-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	font-size: var(--font-ui-small);
}

.file-node__indent {
	padding-left: calc(var(--size-2-2) + var(--size-2-2) + var(--size-4-2));
	border-right: var(--border-width) solid var(--background-modifier-border);
	transition: border-color 300ms;
}

.file-node__indent:hover {
	border-color: var(--background-modifier-border-hover);
}

.file-node__indent_highlight {
	border-color: var(--background-modifier-border-hover);
}

.file-node__expander svg {
	stroke-width: calc(var(--icon-xs-stroke-width) * 1.5);
	color: var(--nav-collapse-icon-color);
	transition: transform 100ms;
}

.file-node__container_kind-parent .file-node__expander_expanded svg {
	transform: rotate(-90deg);
}

.file-node__container_kind-child .file-node__expander_expanded svg {
	transform: rotate(90deg);
}

.top-panel {
	padding: var(--size-4-2) var(--size-4-4);
	display: flex;
	flex-direction: row;
	align-items: center;
	color: var(--text-muted);
	gap: var(--size-4-3);
}

.top-panel_history {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--size-4-1);
	align-self: self-end;
}

.top-panel_left {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--size-4-1);
	flex: 1;
}

[data-type="hierarchy-view"] .view-content {
	padding-top: 0;
}

.sort-mode__container {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}