/* WORDPRESS: PAGINATION
-------------------------------------------- */

.vlt-pagination {
	display: block;
	margin-top: px2rem(80px);
	text-align: center;

	.prev,
	.next {
		overflow: hidden;
		font-size: px2rem(13px);

		svg {
			height: 1em;
		}

	}

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

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

}

/* PAGED
-------------------------------------------- */

.vlt-pagination--paged {
	display: flex;
	justify-content: space-between;

	.prev,
	.next {
		display: flex;
		align-items: center;
		justify-content: center;
		width: px2rem(46px);
		height: px2rem(46px);
		color: var(--vlt-color-dark);
		background-color: var(--vlt-color-gray-light);
		border: 1px solid var(--vlt-color-gray-0p3);
		border-radius: 50%;

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

	}

}

/* NUMERIC
-------------------------------------------- */

.vlt-pagination--numeric {

	ul {
		display: inline-flex;
		padding: 0;
		margin: 0;
		list-style-type: none;
		flex-wrap: wrap;
	}

	li {
		margin: 0 px2rem(5px);
	}

	li a,
	li > span {
		display: flex;
		align-items: center;
		justify-content: center;
		width: px2rem(46px);
		height: px2rem(46px);
		color: var(--vlt-color-dark);
		background-color: var(--vlt-color-gray-light);
		border: 1px solid var(--vlt-color-gray-0p3);
		border-radius: 50%;
		@include vlt_primary_medium_16;

		&:hover,
		&.current {
			color: var(--vlt-color-white);
			background-color: var(--vlt-accent-1);
			border-color: var(--vlt-accent-1);
		}

	}

}