cyp/app/css/component.less

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

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

	.grid {
		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; }
		}
	}
}