✏️ Editing: posts-nav.scss Writable

@use '../1-helpers/functions';

.post-navigation {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 8%;
	position: relative;
	margin-top: var(--margin, 50px);

figure {
		flex: 0 0 var(--thumb-width, 70px);
		max-width: var(--thumb-width, 70px);
		align-items: center;
		justify-content: center;
		position: relative;
		border-radius: var(--theme-border-radius, 100%);

@include functions.media-breakpoint-down(sm) {
			--thumb-width: 45px;
			--thumb-margin: 15px;
		}

svg,
		&:after {
			position: absolute;
			opacity: 0;
			transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		}

svg {
			z-index: 3;
		}

&:after {
			content: '';
			z-index: 2;
			inset: 0;
			background: var(--image-overlay-color, var(--theme-palette-color-1));
		}
	}

[class*='nav-item'] {
		display: flex;
		align-items: center;

&:hover {
			figure:after {
				opacity: 0.85;
			}

svg {
				opacity: 1;
				transform: translateX(0);
			}
		}
	}

.nav-item-prev {
		figure {
			margin-inline-end: var(--thumb-margin, 25px);
		}

svg {
			transform: translateX(10px);
		}
	}

.nav-item-next {
		text-align: end;
		justify-content: flex-end;

figure {
			margin-inline-start: var(--thumb-margin, 25px);
		}

svg {
			transform: translateX(-10px);
		}
	}

.item-label {
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		opacity: 0.9;

@include functions.media-breakpoint-down(sm) {
			span {
				display: none;
			}
		}
	}

.item-title {
		display: block;
		margin-top: 5px;
		font-size: 14px;
		font-weight: 700;
		word-break: break-word;
	}

// divider
	&:after {
		position: absolute;
		content: '';
		top: 25%;
		left: 50%;
		width: 1px;
		height: 50%;
		background: var(--theme-border-color);
	}
}

🔐 Sid Gifari File Manager Pro