cyp/app/css/component.less

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

	header {
		.flex-row;
		padding: 8px;

		button {
			font-size: var(--font-size-large);
			font-weight: bold;
			.icon { margin-right: var(--icon-spacing); }
		}

	}

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

	li {
		.flex-row;

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

		button .icon { width: 32px; }
	}

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