bm-pagination {
	display: block;
}

bm-pagination .pagination-container[hidden] {
	display: none;
}

:root {
	--pagination-bg: var(--bg-color);
	--pagination-border: var(--hover-bg);
	--pagination-text: var(--text-color);
	--pagination-active-bg: var(--link-color);
	--pagination-active-text: var(--bg-color);
	--pagination-hover-bg: var(--hover-bg);
	--pagination-disabled-text: rgba(14, 20, 26, 0.4);

	--pagination-spacing: 8px;
	--pagination-button-size: 40px;
	--pagination-border-radius: 6px;
	--pagination-font-size: 14px;

	--pagination-shadow: var(--shadow-sm);
	--pagination-shadow-hover: var(--shadow-md);
	--pagination-shadow-active: var(--button-shadow);
	--pagination-shadow-focus: 0 0 0 4px rgba(35, 214, 227, 0.2);

	--pagination-transition-base: all var(--duration-base) var(--ease-default);
	--pagination-transition-transform: transform var(--duration-base)
		var(--ease-out-quad);
	--pagination-transition-colors:
		background-color var(--duration-short) var(--ease-default),
		color var(--duration-short) var(--ease-default),
		border-color var(--duration-short) var(--ease-default);
}

@media screen and (max-width: 479px) {
	:root {
		--pagination-spacing: 4px;
		--pagination-button-size: 32px;
		--pagination-font-size: 12px;
		/* 补足 44px 触控区域 */
		--pagination-button-padding: 6px;
	}

	.pagination-container {
		bottom: 10px;
	}
}

@media screen and (min-width: 480px) and (max-width: 1023px) {
	:root {
		--pagination-spacing: 8px;
		--pagination-button-size: 40px;
		--pagination-font-size: 14px;
	}

	.pagination-container {
		bottom: 20px;
	}
}

:root[data-theme="dark"] {
	--pagination-disabled-text: rgba(249, 241, 213, 0.4);
	--pagination-shadow-focus: 0 0 0 4px rgba(116, 206, 255, 0.2);
}

.pagination-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--pagination-spacing);
	margin: 0;
	padding: 0.5rem;
	user-select: none;
	outline: none;
	width: 100%;
	max-width: 500px;

	position: fixed;
	left: 50%;
	bottom: 20px;
	z-index: 999;

	transform: translateX(-50%);

	transition:
		transform var(--duration-base) var(--ease-in-out-cubic),
		opacity var(--duration-base) var(--ease-default);
	will-change: transform, opacity;
	backface-visibility: hidden;

	transition-property: transform, opacity, background-color;
}

.pagination-button {
	min-width: var(--pagination-button-size);
	height: var(--pagination-button-size);
	border: 2px solid var(--pagination-border);
	border-radius: var(--pagination-border-radius);
	background: var(--pagination-bg);
	color: var(--pagination-text);
	font-size: var(--pagination-font-size);
	font-weight: 500;

	font-family: "DingTalk JinBuTi", sans-serif;

	cursor: pointer;
	outline: none;
	appearance: none;
	padding: var(--pagination-button-padding, 0);
	margin: 0;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;

	transition:
		var(--pagination-transition-colors), var(--pagination-transition-transform);

	will-change: transform, background-color, box-shadow, border-color;
	backface-visibility: hidden;
	transform: translateZ(0);

	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;

	transition-property:
		background-color, color, border-color, transform, box-shadow, opacity;
}

@media (hover: hover) and (pointer: fine) {
	.pagination-button:hover:not(:disabled):not(.active) {
		background: var(--pagination-hover-bg);
		box-shadow: var(--pagination-shadow-hover);
		transform: translateZ(0) scale(1.05);
		border-color: var(--link-color);
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	}

	:root[data-theme="dark"]
		.pagination-button:hover:not(:disabled):not(.active) {
		text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.1);
	}
}

.pagination-button.active {
	background: var(--pagination-active-bg);
	color: var(--pagination-active-text);
	border-color: var(--pagination-active-bg);
	box-shadow: var(--pagination-shadow-active);
	font-weight: 600;
	position: relative;

	transform: translateZ(0) scale(1);
}

.pagination-button.active::before {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: var(--pagination-active-bg);
	border-radius: calc(var(--pagination-border-radius) + 2px);
	opacity: 0.2;
	z-index: -1;
	transition: opacity var(--duration-base) var(--ease-default);
}

@media (hover: hover) and (pointer: fine) {
	.pagination-button.active:hover {
		transform: translateZ(0) scale(1.05);
		box-shadow: var(--pagination-shadow-active);
		filter: brightness(1.05);
	}

	.pagination-button.active:hover::before {
		opacity: 0.3;
	}
}

.pagination-button:disabled {
	color: var(--pagination-disabled-text);
	cursor: not-allowed;
	opacity: 0.6;
	border-color: var(--pagination-disabled-text);
	transition: var(--pagination-transition-colors);

	transform: translateZ(0) scale(1);
}

.pagination-button:disabled:hover {
	transform: translateZ(0) scale(1);
	box-shadow: none;
	background: var(--pagination-bg);
	text-shadow: none;
	filter: none;
}

.pagination-button:disabled:focus-visible {
	outline: none;
	box-shadow: none;
}

.pagination-button:focus-visible {
	outline: 2px solid var(--link-color);
	outline-offset: 2px;
	box-shadow: var(--pagination-shadow-focus);
	border-radius: var(--pagination-border-radius);
	transition:
		outline-color var(--duration-short) var(--ease-default),
		box-shadow var(--duration-short) var(--ease-default);
}

:root[data-theme="dark"] .pagination-button:focus-visible {
	outline-color: var(--link-color);
}

.pagination-container:focus-visible {
	outline: 2px solid var(--link-color);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(43, 195, 206, 0.2);
	border-radius: var(--pagination-border-radius);
}

.pagination-button:focus {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.pagination-button:focus-visible {
		animation: focusPulse 2s ease-in-out infinite;
	}
}

@keyframes focusPulse {
	0%,
	100% {
		box-shadow: 0 0 0 4px rgba(43, 195, 206, 0.2);
	}

	50% {
		box-shadow: 0 0 0 4px rgba(43, 195, 206, 0.4);
	}
}

.pagination-ellipsis {
	min-width: var(--pagination-button-size);
	height: var(--pagination-button-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--pagination-text);
	font-size: 18px;
	font-weight: bold;
	user-select: none;
	cursor: default;
	opacity: 0.7;
	transition:
		color var(--duration-short) var(--ease-default),
		opacity var(--duration-short) var(--ease-default);
}

:root[data-theme="light"] .pagination-ellipsis {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

:root[data-theme="dark"] .pagination-ellipsis {
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
}

@media screen and (min-width: 1024px) {
	.pagination-container {
		transform: translateX(calc(-50% + var(--desktop-base-offset)));
	}

	.sidebar.collapsed + .main-content .pagination-container {
		transform: translateX(-50%);
	}
}

@media screen and (max-width: 479px) {
	.pagination-container {
		padding: 0.1rem;
		overflow-x: auto;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
	}
}

@media screen and (min-width: 480px) and (max-width: 1023px) {
	.pagination-container {
		margin: 0.4rem 0;
		padding: 0.2rem;
	}
}

@media screen and (min-width: 1024px) {
	.pagination-container {
		margin: 0.5rem 0;
		padding: 0.3rem;
	}
}

@media (prefers-contrast: high) {
	.pagination-button {
		border-width: 3px;
		font-weight: 600;
	}

	.pagination-button.active {
		border-width: 4px;
		font-weight: 700;
		box-shadow:
			var(--pagination-shadow-active),
			0 0 0 2px var(--pagination-active-bg);
	}

	.pagination-button:focus-visible {
		outline-width: 4px;
		box-shadow: 0 0 0 8px rgba(43, 195, 206, 0.4);
	}

	.pagination-container:focus-visible {
		outline-width: 4px;
		box-shadow: 0 0 0 8px rgba(43, 195, 206, 0.4);
	}

	.pagination-ellipsis {
		font-weight: 900;
		opacity: 1;
	}
}

.page-changing {
	opacity: 0.8;
	transition: opacity 0.2s ease;
}

.page-changing .results-container {
	pointer-events: none;
}

:root[data-theme="light"] .pagination-button:not(:disabled):not(.active) {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		var(--pagination-shadow);
}

:root[data-theme="light"] .pagination-button.active {
	box-shadow:
		var(--pagination-shadow-active),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .pagination-button:not(:disabled):not(.active) {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		var(--pagination-shadow);
}

:root[data-theme="dark"] .pagination-button.active {
	box-shadow:
		var(--pagination-shadow-active),
		0 0 8px rgba(116, 206, 255, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

@media (hover: hover) and (pointer: fine) {
	:root[data-theme="light"]
		.pagination-button:hover:not(:disabled):not(.active) {
		box-shadow:
			var(--pagination-shadow-hover),
			0 0 12px rgba(35, 214, 227, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.3);
	}

	:root[data-theme="dark"]
		.pagination-button:hover:not(:disabled):not(.active) {
		box-shadow:
			var(--pagination-shadow-hover),
			0 0 12px rgba(116, 206, 255, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pagination-container,
	.pagination-button {
		transition:
			color var(--duration-short) var(--ease-default),
			background-color var(--duration-short) var(--ease-default),
			border-color var(--duration-short) var(--ease-default);
		animation: none;
	}

	.pagination-button:hover:not(:disabled) {
		transform: translateZ(0);
	}

	.page-changing {
		transition: none;
	}
}

.pagination-container .pagination-button,
.pagination-container .pagination-ellipsis {
	transition-property:
		background-color, color, border-color, box-shadow, opacity;
	transition-duration: var(--duration-short);
	transition-timing-function: var(--ease-default);
}

@media (forced-colors: active) {
	.pagination-button {
		border: 2px solid ButtonBorder;
		background: ButtonFace;
		color: ButtonText;
	}

	.pagination-button.active {
		background: Highlight;
		color: HighlightText;
		border-color: Highlight;
	}

	.pagination-button:disabled {
		color: GrayText;
		border-color: GrayText;
	}

	.pagination-button:focus-visible {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}
}

@media print {
	.pagination-container {
		display: none;
	}
}