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

			button {
				flex-shrink: 0;

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

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