@import '../vars/typography';

.list-item {
	--baseline-adjust: 0;
	--space-after: 0;
	--radius: var(--container-radius); // todo : set this in a way that makes sense

	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	min-height: 4.8rem;
	clear: both;
	padding: var(--gutter);

	.identifier {
		flex: 0 0 auto;
		padding-right: var(--gutter);
	}

	.content {
		flex: 1 1 auto;
	}

	.meta {
		float: right;
		margin-left: auto;
		padding-left: var(--gutter);
	}

	&.center {
		.identifier {
			align-self: center;
		}

		.content {
			display: flex;
			flex-flow: row-reverse nowrap;
			justify-content: flex-end;
			align-items: center;
			align-self: center;
		}
	}
}