
.wd-nav-pagin-wrap {
	display: flex;
	min-height: var(--wd-pagin-size, 10px);
	margin-top: 20px;
	justify-content: var(--wd-align, var(--wd-center));
	font-size: 0;
}

.wd-nav-pagin-wrap:has(.wd-lock) {
	display: none;
}

.wd-nav-pagin {
	--list-mb: 0;
	--li-mb: 0;
	--li-pl: 0;
	list-style: none;
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wd-pagin-gap, 10px);
	transition: all .25s ease;
}

.wd-nav-pagin li {
	position: relative;
	cursor: pointer;
	transition: all .25s ease;
}

.wd-nav-pagin:not([class*="wd-type-"]), .wd-nav-pagin.wd-lock {
	opacity: 0;
}

.wd-dynamic>.wd-nav-pagin {
	flex-wrap: nowrap;
	gap: 0;
	margin: 0 auto;
	overflow: hidden;
}

.wd-dynamic>.wd-nav-pagin li {
	margin-inline: calc(var(--wd-pagin-gap, 10px) / 2);
}

.wd-nav-pagin-wrap[class*="wd-style-shape"] span {
	display: inline-flex;
	width: var(--wd-pagin-size, 10px);
	height: var(--wd-pagin-size, 10px);
	background-color: var(--wd-pagin-bg, unset);
	border: var(--wd-pagin-brd, 2px solid) var(--wd-pagin-brd-color, var(--color-gray-300));
	border-radius: var(--wd-pagin-radius, var(--wd-pagin-size, 10px));
	transition: all .25s ease;
}

.wd-nav-pagin-wrap[class*="wd-style-shape"] li:not(.wd-active):hover span {
	border-color: var(--wd-pagin-brd-color-hover, var(--color-gray-800));
	background-color: var(--wd-pagin-bg-hover, var(--wd-pagin-bg, unset));
}

.wd-nav-pagin-wrap[class*="wd-style-shape"] li.wd-active span {
	border-color: var(--wd-pagin-brd-color-act, var(--color-gray-800));
	background-color: var(--wd-pagin-bg-act, var(--color-gray-800));
}
