.component {
	height: 100%;
	display: flex;
	flex-direction: column;

	ul {
		flex-grow: 1;
		overflow: auto;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	li {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 4px;
		white-space: nowrap;
	}

	h2 {
		flex-grow: 1;
		font-size: 100%;
		font-weight: normal;
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;

		.icon {
			margin-right: 4px;
			color: var(--primary);
		}
	}

	li:nth-child(odd) {
		background-color: #555;
	}

	@media (pointer: coarse) {
		.icon { width: 32px; }
	}
}