/*
 * Colours use the contextual `--ds-color-*` aliases so the tree follows the
 * active colour scheme. Never add hex fallbacks — they only encode the light
 * theme and silently mask misspelled tokens.
 */

.ObSavedFilterTree-root,
.ObSavedFilterTree-children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ObSavedFilterTree-children {
	/*
	 * A branch is chevron + icon, a child only an icon, so matching the branch
	 * indent would put a child's icon under its parent's icon and make the two
	 * levels look like one. Indent past the branch icon instead, so a child's
	 * icon starts where its parent's label does.
	 */
	margin-inline-start: calc(var(--ds-size-6) + var(--ds-size-1) + var(--ds-size-6));
}

.ObSavedFilterTree-item {
	display: flex;
	align-items: center;
	gap: var(--ds-size-1);
}

.ObSavedFilterTree-node {
	display: flex;
	align-items: center;
	gap: var(--ds-size-1);
	flex: 1;
	min-inline-size: 0;
	padding: var(--ds-size-1) var(--ds-size-2);
	border: none;
	border-radius: var(--ds-border-radius-sm);
	background: none;
	color: var(--ds-color-text-default);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.ObSavedFilterTree-node:hover {
	background: var(--ds-color-surface-hover);
}

.ObSavedFilterTree-node:focus-visible {
	outline: var(--ds-border-width-focus) solid var(--ds-color-focus-outer);
	outline-offset: var(--ds-border-width-focus);
}

.ObSavedFilterTree-selected {
	background: var(--ds-color-surface-active);
}

.ObSavedFilterTree-dirty .ObSavedFilterTree-label {
	font-weight: var(--ds-font-weight-semibold);
}

.ObSavedFilterTree-chevron,
.ObSavedFilterTree-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: var(--ds-size-6);
	block-size: var(--ds-size-6);
	color: var(--ds-color-text-subtle);
}

.ObSavedFilterTree-chevron > *,
.ObSavedFilterTree-icon > * {
	inline-size: 100%;
	block-size: 100%;
}

.ObSavedFilterTree-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ObSavedFilterTree-empty {
	/* Lines up with the child labels, past their icon. */
	padding: var(--ds-size-1) var(--ds-size-2) var(--ds-size-1)
		calc(var(--ds-size-2) + var(--ds-size-6) + var(--ds-size-1));
	color: var(--ds-color-text-subtle);
	font-style: italic;
}

/*
 * The menu button only appears on hover/focus on pointer devices; on touch it is
 * always visible because there is no hover to reveal it.
 */
@media (hover: hover) {
	.ObSavedFilterTree-menuButton {
		visibility: hidden;
	}

	.ObSavedFilterTree-item:hover .ObSavedFilterTree-menuButton,
	.ObSavedFilterTree-item:focus-within .ObSavedFilterTree-menuButton {
		visibility: visible;
	}
}