/*
Pagination
 */
.em-pagination {
	--color : #aaa;
	--color-hover : #777;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-items: center;
	flex-wrap: nowrap;
	max-width: 100%;
	min-width: 0;
	margin: auto;

	.not-current {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-items: center;
		height: 40px;
		overflow: hidden;
		min-width: 0;
	}

	&.overflowing .not-current {
		.page-numbers {
			display: none;
		}
		&:after {
			content : '...';
			padding : 0 10px;
		}
		&.first-half:after {
			padding-right: 15px;
		}
		&.second-half:after {
			padding-left: 15px;
		}
	}

	.page-numbers {
		display: inline-block;
		min-width: 38px;
		height: 40px;
		font-size: 18px !important;
		color: var(--color) !important;
		text-decoration : none;
		padding: 6px 0;
		margin: 0;
		transition: all 300ms ease-in-out;
		text-align: center;

		&:hover, &.current {
			color: var(--color-hover);
			font-size: 25px !important;
			height: 48px;
			padding: 4px 0;
		}

		&.current {
			text-decoration: 2px dotted underline;
			text-underline-offset: 5px;
		}

		&.next, &.prev, &.next.last, &.prev.first {
			display: block;
			width: 25px;
			height: 25px;
			margin: 0;
			font-size: 0 !important;
			background-size: 25px;
			background-position: center;
			background-repeat: no-repeat;
			opacity: 0.5;
			transition: all 300ms ease-in-out;

			&:hover{
				opacity : 1;
				background-size: 35px;
				border-bottom: none;
			}
		}
		&.next { background-image : var(--icon-next-circle); }
		&.next.last { background-image : var(--icon-last-circle); }
		&.prev { background-image : var(--icon-prev-circle); }
		&.prev.first { background-image : var(--icon-first-circle); }
	}
	& > .page-numbers {
		flex: none;
	}
}