:root,
:root[data-mode="light"] {
	--card-radius: 1rem;
	--tag-radius: 2rem;

	/* Colors */
	--color-highlight: var(--color-slate-600);

	--color-bg: var(--color-neutral-100);
	--color-bg-highlight: var(--color-neutral-200);
	--color-bg-active: var(--color-slate-300);

	--color-tags-bg: var(--color-neutral-200);
	--color-tags-bg-highlight: var(--color-neutral-300);

	--color-border: var(--color-neutral-300);
	--color-border-highlight: var(--color-neutral-400);
}

:root[data-mode="dark"] {
	/* Colors */
	--color-highlight: var(--color-slate-400);
	
	--color-bg: var(--color-neutral-900);
	--color-bg-highlight: var(--color-neutral-800);
	--color-bg-active: var(--color-slate-700);

	--color-tags-bg: var(--color-neutral-800);
	--color-tags-bg-highlight: var(--color-neutral-700);
	--color-tags-bg-active: var(--color-slate-600);

	--color-border: var(--color-neutral-600);
	--color-border-highlight: var(--color-neutral-500);

}

.post-cover,
.post-cover img,
.post-card,
.post-title,
.post-author
.post-tags,
.tag-item {
	transition-timing-function: var(--timing-default);
	transition-duration: var(--duration-fast);
}

.post-grid {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 0;
	list-style: none;
}

.post-card {
	border-radius: var(--card-radius);
	padding: 2rem;
	padding-left: 2.5rem;
	position: relative;
	min-height: 16rem;
	
	border: 1px solid var(--color-border);
	color: var(--color-primary);
	background-color: var(--color-bg);
	transition-property: background-color, border, box-shadow;
	cursor: pointer;
}

.post-card:hover {
	background-color: var(--color-bg-highlight);
	border: 1px solid var(--color-border-highlight);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
}

.post-card:active,
.post-card.active {
	background-color: var(--color-bg-active);
}

.post-card-inner {
	position: relative;
	z-index: 2;
}

.post-card-link {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 3;
	text-decoration: none;
	background: transparent;
}


.post-cover {
	position: absolute;
	top: 0;
	right: 0;
	width: 75%;
	height: var(--height-full);
	z-index: 0;
	pointer-events: auto;

	-webkit-mask-image: linear-gradient(to right,#0000, #000);
	mask-image: linear-gradient(to right, #0000, #000);
	transition-property: filter;
}

.post-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: transparent;
	transition-property: backdrop-filter;
	pointer-events: none;
	border-radius: var(--card-radius);
}

.post-card:active .post-cover::after,
.post-card.active .post-cover::after {
	backdrop-filter: blur(20px) saturate(0.5);
}

.post-cover img {
	width: var(--width-full);
	height: var(--height-full);
	object-fit: cover;
	object-position: right;
	position: relative;

	opacity: 0.5;
	border-radius: var(--card-radius);
	transition-property: opacity, filter;

	pointer-events: auto;
}

.post-card:hover .post-cover img {
	opacity: 1;
}

.post-date {
	font-family: var(--font-mono);
	opacity: 50%;
}

.post-title {
	transition-property: color;
}

.post-card:hover .post-title {
	color: var(--color-highlight);
}

.post-card:active .post-title,
.post-card.active .post-title {
	color: var(--color-primary);
}

.post-description {
	margin-block: 1rem;
	
	white-space: pre-wrap;
	line-height: var(--line-height-sm);
	opacity: 75%;
}

.post-author {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-block: 1rem;

	font-size: var(--text-sm);
	opacity: 75%;
}

.post-tags {
	display: flex;
	flex-direction: row;
	gap: 5px;

	width: fit-content;
	position: relative;
	padding: 0;

	list-style: none;
	z-index: 5;
}

.tag-item::before {
	content: "#";
	opacity: 50%;
}

.tag-item {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 5px;

	
	padding: 0.5rem;
	height: 1.75rem;
	
	font-size: var(--text-sm);
	
	border: 1px solid var(--color-border);
	background-color: var(--color-tags-bg);
	border-radius: var(--tag-radius);

	transition-property: background-color, color, border;
}

.tag-item:hover {
	color: var(--color-highlight);
}

.post-card:hover .tag-item {
	background-color: var(--color-tags-bg-highlight);
	border: 1px solid var(--color-border-highlight);
}

.post-card:active .tag-item,
.post-card.active .tag-item {
	background-color: var(--color-tags-bg-active);
}