/*
 * Post Navigation (Loop) widget.
 *
 * Two mirrored flex links: previous pinned to the start, next pinned to the
 * end. The auto margins keep each side in place even when only one link is
 * rendered. The next link reverses its row so the icon sits on the outside;
 * PHP always emits icon, image, text in the same order.
 */

.ehs-postnav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.ehs-postnav__item {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 48%;
	color: inherit;
	text-decoration: none;
}

.ehs-postnav__item:only-child {
	max-width: 100%;
}

.ehs-postnav__prev {
	margin-inline-end: auto;
}

.ehs-postnav__next {
	margin-inline-start: auto;
	flex-direction: row-reverse;
	text-align: end;
}

.ehs-postnav__text {
	display: flex;
	flex-direction: column;
}

.ehs-postnav__label {
	font-size: 0.85em;
	opacity: 0.7;
}

.ehs-postnav__title {
	margin: 0;
	font-size: 1em;
}

.ehs-postnav__img {
	display: block;
	flex-shrink: 0;
	width: 80px;
	height: auto;
}

.ehs-postnav__icon {
	line-height: 1;
}

.ehs-postnav__icon svg {
	display: block;
	width: 1em;
	height: auto;
	fill: currentColor;
}

.ehs-postnav--divider .ehs-postnav__next {
	border-inline-start: 1px solid rgba(0, 0, 0, 0.15);
	padding-inline-start: 24px;
}

.ehs-postnav__empty {
	padding: 24px;
	border: 1px dashed rgba(0, 0, 0, 0.3);
	background: rgba(0, 0, 0, 0.04);
	font-size: 14px;
	text-align: center;
}