
.learndash-pager {
	color: $text-grey;
	display:inline-flex;
	justify-content:space-between;
	color:$text-grey;
	text-transform:uppercase;
	align-items:center;
	font-size: 12px;
	font-weight:700;
	background-color:$border-grey;
	padding: 6px 12px;
	border-radius:17px;
	margin: 10px 0;
	a {
		font-size: 18px;
		color: $text-grey;
		text-decoration: none !important;
		border: none !important;
		cursor: pointer;
		box-shadow: none !important;
		line-height: 1em;
		&::before,
		&::after {
			display: none;
		}
		&.disabled {
			opacity: 0.5;
			cursor: default;
		}
	}
	.pager-left {
		order: 1;
	}
	.pager-legend {
		order: 2;
		padding: 0 8px;
	}
	.pager-right {
		order: 3;
	}
}

.#{$namespace}-wrapper {

	.ld-pagination {
		display:flex;
		justify-content:flex-end;
		color:$text-grey;
		text-transform:uppercase;
		align-items:center;
		font-size:0.75em;
		font-weight:700;
		margin-bottom: 1em;
		.ld-pages {
			background-color:$border-grey;
			flex:0 0 180px;
			display:flex;
			justify-content:space-between;
			align-items:center;
			padding:0.5em;
			border-radius:17px;
			overflow:hidden;
			line-height:1;
			i {
				display:block;
				background-size:contain;
				background-position:center;
				background-repeat:no-repeat;
				color:$text-grey;
				cursor:pointer;
				transition:color 0.3s ease;
				&:hover {
					color:$blue;
				}
			}
			a {
				color: $text-grey;
				transition: all ease-in-out 250ms;
				&:hover {
					color: #333;
				}
				&.disabled {
					pointer-events: none;
					opacity: 0.25;
				}
			}
		}
		@include for-phone {
			justify-content: center;
		}
	}
	.ld-item-list-item-expanded {
		.ld-pagination {
			.ld-pages {
				flex:0 0 100px;
				padding:0 10px;
			}
		}
	}
	.ld-table-list-footer {
		.ld-pagination {
			.ld-pages {
				flex:0 0 120px;
			}
		}
	}
}

.ld-loading {
	position: relative;
	&::after {
		position: absolute;
		content: '';
		display: block;
		z-index: 99;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba( 255, 255, 255, 0.5 );
	}
	&::before {
		content: '';
		display: block;
		position: absolute;
		border-radius: 50%;
		width: 40px;
		z-index: 100;
		height: 40px;
		left: 50%;
		top: 50%;
		margin: -20px 0 0 -20px;
		border: 3px solid rgba( 0, 0, 0, 0.5 );
		border-top: 3px solid $blue;
		animation: ldrotating 1.2s infinite linear;
	}
}
