style.scss

.draft.card {
	padding: 12px 16px;
	margin: 0;
	overflow: hidden;
	transition: background 0.05s ease-in-out;
	text-decoration: none;
	color: var( --color-neutral-700 );

	.card__link-indicator {
		display: none;
	}

	&:hover {
		background: var( --color-neutral-0 );

		.draft__title {
			color: var( --color-neutral-500 );
		}
	}

	&.has-image {
		.draft__title {
			margin-right: 88px;
		}
	}

	&.is-selected {
		border-left: 8px solid var( --color-primary );
		background: var( --color-neutral-0 );
	}

	&.is-image-zoomed {
		min-height: 150px;

		.draft__featured-image {
			//position: relative;
			width: 100%;
			//max-height: 100px;
			cursor: zoom-out;
		}
	}
}

.draft__title {
	font-family: $serif;
	font-weight: bold;
	font-size: 15px;
	line-height: 1.4;
}

.draft__time {
	font-size: 13px;
	color: var( --color-text-subtle );
}

.draft__empty-text {
	color: var( --color-neutral-500 );
	font-weight: 400;
	font-style: italic;
}

// Images
.draft__featured-image {
	display: block;
	position: absolute;
		top: 8px;
		right: 8px;
		bottom: 8px;
	overflow: hidden;
	transition: height 0.15s ease-in-out;
	width: 72px;
	border-radius: 3px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

// Loading placeholder
.draft.is-placeholder {
	.draft__title,
	.time-text {
		animation: pulse-light 0.8s ease-in-out infinite;
	}

	.draft__title {
		background: var( --color-neutral-100 );
		color: transparent;
		height: 16px;
		width: 30%;
		&::after {
			display: none;
		}
	}
}