.bb-rl-container-inner,
.bb-rl-content-wrapper {

	.bp-pagination {
		display: flex;
		align-items: center;
		padding-top: var(--bb-rl-space-400);
		padding-bottom: var(--bb-rl-space-400);

		> .pag-count {
			display: none;
		}

		> .bp-pagination-links {
			display: flex;
			align-items: center;
			margin-left: auto;
			gap: var(--bb-rl-space-100);

			.pag-data {
				display: flex;
				align-items: center;
				gap: var(--bb-rl-space-100);
			}

			span,
			a {

				@include bb-rl-label-heading-bolder;
				line-height: var(--bb-rl-space-400);
			}

			.prev,
			.next {
				display: inline-flex;
				align-items: center;
				gap: var(--bb-rl-space-50);
				font-size: 0;
				padding: 0 var(--bb-rl-space-200);
				border: 1px solid var(--bb-rl-border-tertiary-color);
				border-radius: var(--bb-rl-radius-md);

				&::before {
					font-size: var(--bb-rl-font-size-sm);
					content: attr(data-bb-rl-label);
				}

				&::after {
					font-size: var(--bb-rl-font-size-base);
					content: "";
					font-weight: 400;
					font-family: bb-icons-rl;
					font-style: normal;
					line-height: 1;
					position: relative;
					top: 1px;
				}
			}

			.prev {
				flex-direction: row-reverse;
				margin-right: var(--bb-rl-space-500);

				@media screen and (max-width: $sm) {
					margin-right: var(--bb-rl-space-200);
				}

				&::after {
					content: "\e138";
				}
			}

			.next {
				margin-left: var(--bb-rl-space-500);

				@media screen and (max-width: $sm) {
					margin-left: var(--bb-rl-space-200);
				}

				&::after {
					content: "\e13a";
				}
			}

			.page-numbers:not(.prev):not(.next),
			.bb-rl-page-numbers:not(.prev):not(.next) {
				display: inline-flex;
				min-width: var(--bb-rl-space-400);
				height: var(--bb-rl-space-400);
				border: 1px solid transparent;
				border-radius: var(--bb-rl-radius-md);
				justify-content: center;
				color: var(--bb-rl-text-tertiary-color);

				&.current {
					color: var(--bb-rl-text-color);
					border: 1px solid var(--bb-rl-border-quaternary-color);
					background-color: var(--bb-rl-background-color);
				}

				&:hover {
					border-color: var(--bb-rl-border-tertiary-color);
				}
			}

			a.prev,
			a.next {
				color: var(--bb-rl-text-color);
			}

			span.prev,
			span.next {
				color: var(--bb-rl-text-disabled-color);
			}
		}
	}
}

.bb-rl-content-wrapper {

	.bbp-pagination-links {
		display: flex;
		align-items: center;

		span,
		a {
			line-height: var(--bb-rl-space-400);
		}

		.prev,
		.next {
			font-size: var(--bb-rl-font-size-sm);
			font-weight: 500;
			display: inline-flex;
			align-items: center;
			gap: var(--bb-rl-space-50);
			padding: 0 var(--bb-rl-space-200);
			border: 1px solid var(--bb-rl-border-tertiary-color);
			border-radius: var(--bb-rl-radius-md);

			&::before {
				font-size: var(--bb-rl-font-size-sm);
				content: attr(data-bb-rl-label);
			}

			&::after {
				font-size: var(--bb-rl-font-size-base);
				content: "";
				font-weight: 400;
				font-family: bb-icons-rl;
				font-style: normal;
				line-height: 1;
				position: relative;
				top: 1px;
			}
		}

		.prev {
			flex-direction: row-reverse;
			margin-right: var(--bb-rl-space-500);

			@media screen and (max-width: $sm) {
				margin-right: var(--bb-rl-space-200);
			}

			&::after {
				content: "\e138";
			}
		}

		.next {
			margin-left: var(--bb-rl-space-500);

			@media screen and (max-width: $sm) {
				margin-left: var(--bb-rl-space-200);
			}

			&::after {
				content: "\e13a";
			}
		}

		.page-numbers:not(.prev):not(.next) {
			display: inline-flex;
			min-width: var(--bb-rl-space-400);
			height: var(--bb-rl-space-400);
			border: 1px solid transparent;
			border-radius: var(--bb-rl-radius-md);
			justify-content: center;
			color: var(--bb-rl-text-tertiary-color);
			font-size: var(--bb-rl-font-size-sm);

			&.current {
				color: var(--bb-rl-text-color);
				border: 1px solid var(--bb-rl-border-quaternary-color);
			}

			&:hover {
				border-color: var(--bb-rl-border-tertiary-color);
			}
		}

		a.prev,
		a.next {
			color: var(--bb-rl-text-color);
		}

		span.prev,
		span.next {
			color: var(--bb-rl-text-disabled-color);
		}
	}
}
