.#{$component-prefix}card-deliverable {
	@include make-card();
	@include make-card-padding();

	display: grid;
	grid-gap: 12px;
	grid-template-columns: 1fr max-content;
	grid-template-areas:
		"header timestamp"
		"file-list file-list";

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		font-size: $font-size-small;
	}

	> .header {
		grid-area: header;
		align-self: center;

		line-height: 1;
	}

	> .timestamp {
		grid-area: timestamp;
		align-self: center;

		font-size: $font-size-mini;
		line-height: 1;

		color: $color-text-secondary;
	}

	> .file-list {
		grid-area: file-list;

		> li {
			display: flex;

			&:not(:first-child) {
				margin-top: 0.5rem;
			}

			> span {
				display: flex;
				align-items: center;
			}

			> span:nth-child(2) {
				flex: 1;
			}

			> span:not(:first-child) {
				margin-left: 0.5rem;
			}
		}
	}
}