#article-list {
	article {
		position: relative;

		&.draft {
			transform: scale(0.95);
			opacity: 0.6;
			transition-duration: var(--transition-longer);
			transition-property: transform, opacity, outline, outline-offset;
			outline: 2px dashed var(--fg-muted-2);
			outline-offset: 1rem;
			border-radius: 1rem;

			&:hover {
				transform: scale(1);
				opacity: 1;
				outline: 2px dashed transparent;
				outline-offset: 0;
			}
		}

		.draft-badge,
		.archive-badge {
			position: absolute;
			top: 0;
			right: 0;
			box-shadow: var(--edge-highlight);
			border-radius: 999px;
			padding: 0.25rem 0.75rem;
			font-weight: bold;

			svg {
				vertical-align: -0.125em;
			}
		}

		.draft-badge {
			background-color: var(--fg-muted-1);
			color: var(--fg-muted-4);
		}

		.archive-badge {
			background-color: var(--purple-bg);
			color: var(--purple-fg);
		}
	}

	hr:last-of-type {
		display: none;
	}
}