.JDpagination {
	display: flex;
	justify-content: inherit;


	a {
		outline: none;
	}

	// ⭐ Modifiers ️
	&-wrap {
		&--text-large {
			font-size: $typho-huge;
		}

		&--align-center {
			justify-content: center;
		}

		&--prev-hidden {
			.JDpagination__btn-prev {
				display: none;
			}
		}
	}

	&__btn {
		cursor: pointer;
		display: flex;
		align-items: center;
		height: $pagination-li-height;
	}

	&__li {
		display: flex;
		align-items: center;
		justify-content: center;
		width: $pagination-li-width;
		height: $pagination-li-height;
		border: 1px solid $grey-level4;
		border-radius: $br1;
		cursor: pointer;

		margin: 0 space(.5);

		&:hover {
			background-color: $pagination-li-hover !important;

			a {
				color: white;
			}
		}

		a {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&--active {
			background-color: $pagination-active-bg !important;

			a {
				outline: none;
				color: white !important;
			}
		}
	}

	&__a {
		color: $html-color;

		&--active {
			opacity: 1;
		}
	}

}

.JDpagination__ellipsis-a {
	display: none;
}

.JDpagination {
	[aria-disabled=true] {
		color: $disabled-color;

		&:hover {

			cursor: auto;
		}

	}

	.JDpagination__btn-prev,
	.JDpagination__btn-next {
		background-color: transparent !important;
		color: $html-color;

	}

	&__btn-prev a {
		background-color: transparent !important;
		display: flex !important;
		align-items: center;
		margin-right: space(2);
	}

	&__btn-next a {
		background-color: transparent !important;
		display: flex !important;
		align-items: center;
		margin-left: space(2);
	}

	.JDpagination__btn-txt,
	.JDpagination__arrowicon {
		margin: 0px!important;
	}
}