#pages {
	width: 100%;
	display: flex;
	gap: 0.625rem;
}
#pages > li {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.375rem;
	border: 1px solid #d2d2d2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #222;
	font-size: 1rem;
	cursor: pointer;
}
#pages > li:last-of-type :is(a, span),
#pages > li:first-of-type :is(a, span) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
}
#pages > li:first-of-type:before {
	content: "";
	display: inline-block;
	width: 80%;
	height: 80%;
	background-color: black; /* 通过 color 控制图标颜色 */
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M60 30 L40 50 L60 70' fill='none' stroke='white' stroke-width='8'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M60 30 L40 50 L60 70' fill='none' stroke='white' stroke-width='8'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
}

#pages > li:last-of-type:before {
	content: "";
	display: inline-block;
	width: 80%;
	height: 80%;
	background-color: black; /* 通过 color 控制图标颜色 */

	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M40 30 L60 50 L40 70' fill='none' stroke='white' stroke-width='8'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
}
#pages > li:hover {
	background: #b81c20;
	color: white;
}
#pages > li:first-of-type:hover:before,
#pages > li:last-of-type:hover:before {
	content: "";
	background: white;
}
#pages .active {
	background: #b81c20;
	color: white;
}

/* 自定义select */
.customSelect input {
	display: none;
}
#optionBox {
	position: absolute;
	left: 0;
	top: calc(3.125rem + 0.625rem);
	width: 11.25rem;
	min-height: 20rem;
	background: white;
	display: none;
	z-index: 2;
	flex-direction: column;
	border: 1px solid #eee;
	border-radius: 0.625rem;
}
#optionBox > label {
	display: flex;
	justify-content: center;
	padding: 1.25rem 0;
	cursor: pointer;
}
#optionBox > label:hover {
	background: #b81c20;
	color: white;
}
.view {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	cursor: pointer;
	justify-content: space-between;
}
.view:after {
	content: "∨";
    font-weight: bold;
    transform: scaleX(1.5);
}
#showStatus:checked ~ #optionBox {
	display: flex;
}
#showStatus:checked ~ #mask {
	display: block;
}
#showStatus:checked ~.view:after{
	content: "∧";
}
#mask {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: none;
}