cyp/app/css/component.less

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

	header {
		display: flex;
	}

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

	li {
		display: flex;
		flex-direction: row;
		align-items: center;

		.info { 
			flex-grow: 1;
			overflow: hidden;

			.icon {
				color: var(--primary);
				margin-right: var(--icon-spacing);
				filter: drop-shadow(var(--shadow));
			}

			h2 {
				font-size: var(--font-size-large);
				margin: 0;
			}

			h2, div { .long-line; }
		}

		&.has-art {

		}

		&:not(.has-art) {
			padding: 8px;
		}
	}

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

	button .icon { width: 32px; }

}