.tify-collection {
	@extend %panel;
	overflow-y: scroll;
	padding: g(.5);
}

.tify-collection-controls {
	display: flex;
}

.tify-collection-filter {
	border-radius: $br 0 0 $br;
	flex: 1;
	max-width: 36em;

	&:focus {
		z-index: 1;
	}
}

.tify-collection-header {
	backdrop-filter: $blur;
	background: oklch(from $panel-bg l c h / 61.8%);
	margin: g(-.5) g(-.5) 0;
	padding: g(.5);
	position: sticky;
	top: g(-.5);
}

.tify-collection-list {
	list-style: none;
	margin: 0;
	padding: 0;

	& & {
		margin-left: g();
		margin-top: g(.25);
	}

	li {
		margin-bottom: g(.25);
	}
}

.tify-collection-link {
	@extend %button;
	align-items: start;
	gap: .2em;
	justify-content: left;
	padding-left: g(.375);
	padding-right: g(.375);
	text-align: left;
	text-decoration: none;
	width: 100%;

	&.-has-children {
		font-weight: bold;
	}

	.tify-collection-item.-current & {
		@extend %button-active;
		color: $text-color-inverted !important;
	}

	> .tify-icon {
		margin-left: -.25em;
	}
}

.tify-collection-no-results {
	color: $text-color-muted;
}

.tify-collection-reset {
	@extend %button-small;
	border-radius: 0 $br $br 0;
	margin-left: -1px;
}