/* WORDPRESS: PAGE NAVIGATION
-------------------------------------------- */

.vlt-page-navigation {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: px2rem(18px);

	svg {
		height: 1em;
	}

	&__all {
		position: absolute;
		top: calc(50% - #{px2rem(35px)});
		left: calc(50% - #{px2rem(35px)});
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: px2rem(70px);
		height: px2rem(70px);
		color: var(--vlt-accent-1);
		background-color: var(--vlt-color-white);
		border-radius: 50%;
		box-shadow: var(--vlt-box-shadow) !important;

		svg {
			transition: transform var(--vlt-transition-duration) var(--vlt-transition-easing);
			will-change: transform;
		}

		&:hover {
			color: var(--vlt-color-white);
			background-color: var(--vlt-accent-1);

			svg {
				transform: rotate(90deg);
			}

		}

	}

	&__prev,
	&__next {
		display: flex;
		align-items: center;
		padding: px2rem(40px);
		margin: 0;
		background-color: var(--vlt-color-gray-light);
		border-radius: var(--vlt-border-radius-sm);
		@include vlt_primary_bold_20;

		@include media-breakpoint-up(md) {
			padding: px2rem(50px) px2rem(70px);
		}

		svg {
			font-size: px2rem(13px);
		}

	}

	&__prev {

		svg {
			margin-right: px2rem(30px);
		}

		&:hover svg {
			animation: vlt_animate_icon_left var(--vlt-transition-duration) var(--vlt-transition-easing) forwards;
		}

	}

	&__next {
		justify-content: end;
		text-align: right;

		svg {
			margin-left: px2rem(30px);
		}

		&:hover svg {
			animation: vlt_animate_icon_right var(--vlt-transition-duration) var(--vlt-transition-easing) forwards;
		}

	}

}

.vlt-post-navigation {
	position: fixed;
	top: 50%;
	right: px2rem(50px);
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--vlt-transition-duration) var(--vlt-transition-easing);
	transform: rotate(90deg) translateX(50%);
	transform-origin: right top;
	z-index: z('post-navigation');

	@include media-breakpoint-down(lg) {
		display: none !important;
	}

	&.is-visible {
		visibility: visible;
		opacity: 1;
	}

	a + a {
		margin-left: px2rem(12px);
	}

}