.ct-pagination {
	color: var(--paginationFontColor);

	&:not([data-divider]) {
		margin-top: var(--paginationSpacing);
	}

	// divider
	&[data-divider] {
		margin-top: calc(var(--paginationSpacing) / 2);
		padding-top: calc(var(--paginationSpacing) / 2);
		border-top: 1px dashed var(--paginationBorderColor);
	}

	// Simple
	&[data-type="simple"] nav {
		display: flex;
		justify-content: center;
		position: relative;
		font-size: 15px;
		color: rgba(44, 62, 80, 0.7);

		a {
			color: var(--paginationFontColor);

			&:hover {
				color: var(--paginationAccentInitialColor);
			}
		}

		> * {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 40px;
			height: 40px;
			@include media-breakpoint-down (sm) {
				margin: 0 5px;
			}

			@include media-breakpoint-up (md) {
				margin: 0 10px;
			}
			border-radius: 3px;
			transition: color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
						background 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
						border-color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

			&.current {
				color: #fff;
				background: var(--paginationAccentInitialColor);
			}
		}

		.prev, .next {
			@include media-breakpoint-up (md) {
				position: absolute;
				top: 0;
				margin: 0;
			}
			box-sizing: content-box;
			background: #fff;
			box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.01);

			svg {
				fill: currentColor;
			}

			&:hover {
				color: #fff;
				background: var(--paginationAccentInitialColor);
			}
		}

		.prev {
			left: 0;
		}

		.next {
			right: 0;
		}
	}

	// Next/prev
	&[data-type="next_prev"] nav {
		a {
			color: var(--paginationFontColor);

			&:hover {
				color: var(--paginationAccentInitialColor);
			}

			svg {
				fill: currentColor;
			}

			span {
				font-size: 15px;
			}
		}

		.prev {
			span {
				margin-left: 10px;
			}
		}

		.next {
			float: right;

			span {
				margin-right: 10px;
			}
		}

		&:after {
			content: '';
			clear: both;
			display: table;
		}
	}

	
	// Load more & infinite scroll
	&[data-type="load_more"],
	&[data-type="infinite_scroll"] {
		> nav {
			display: none;
		}
	}

	.ct-load-more-helper {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		min-height: 45px;

		[data-loader] {
			z-index: -1;
			opacity: 0;
			transition: opacity 0.2s ease;
		}

		&.ct-loading {
			[data-loader] {
				opacity: 1;
				animation-play-state: running;
			}

			.ct-load-more {
				opacity: 0;
			}
		}
	}

	.ct-load-more {
		text-transform: capitalize;
		font-size: 15px;
		font-weight: 600;
		opacity: 1;
		transition: opacity 0.2s ease;

		@include button((
			height: 45px,
			bg_1: var(--paginationAccentInitialColor),
			bg_2: var(--paginationAccentHoverColor),
			// padding: 18px,
			// shadow: false,
			// translate: false,
		));
	}

	.ct-last-page-text {
		display: none;
		align-items: center;
		min-height: inherit;
		font-size: 15px;
		opacity: 0.7;
	}

	&.ct-last-page {
		.ct-load-more, [data-loader] {
			display: none;
		}

		.ct-last-page-text {
			display: flex;
		}
	}
}