#post-nav {
	display: flex;

	.post-nav-item {
		transition: var(--transition);
		width: 50%;
		text-decoration: none;

		&:hover .post-title {
			color: var(--primary-color);
		}

		&:active {
			transform: scale(var(--active));
		}

		&.post-nav-prev {
			transform-origin: left;
			padding-right: 1rem;

			:root[dir*="rtl"] & {
				transform-origin: right;
				padding-right: unset;
				padding-left: 1rem;
			}

			.nav-arrow::before {
				content: "← ";

				:root[dir*="rtl"] & {
					content: "→ ";
				}
			}
		}

		&.post-nav-next {
			transform-origin: right;
			margin-left: auto;
			padding-left: 1rem;
			text-align: end;

			:root[dir*="rtl"] & {
				transform-origin: left;
				margin-right: auto;
				margin-left: unset;
				padding-right: 1rem;
				padding-left: unset;
			}

			.nav-arrow::after {
				content: " →";

				:root[dir*="rtl"] & {
					content: " ←";
				}
			}
		}

		.nav-arrow {
			margin-bottom: 0.5rem;
			color: var(--fg-muted-5);
			font-weight: normal;
		}

		.post-title {
			transition: var(--transition);
			color: var(--fg-color);
		}
	}
}