/**
 * 全站统一：横向滚动 / 轮播 左右箭头按钮
 * 用于：首页商品轮播、商品页缩略图条、优惠券列表、顶部导航等
 * 用法：在容器内放两个 button，分别加 sanxio-scroll-arrow sanxio-scroll-arrow--prev / --next
 */

.sanxio-scroll-arrow {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: var(--md-sys-color-surface-container, #e7e0ec);
	color: var(--md-sys-color-on-surface-variant, #49454f);
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sanxio-scroll-arrow:hover {
	background: var(--md-sys-color-primary-container, #bbdefb);
	color: var(--md-sys-color-on-surface, #1c1b1f);
}
.sanxio-scroll-arrow:focus-visible {
	outline: 2px solid var(--md-sys-color-primary);
	outline-offset: 2px;
}
/* 左箭头 */
.sanxio-scroll-arrow--prev::after {
	content: '';
	width: 8px;
	height: 8px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-left: 2px;
}
/* 右箭头 */
.sanxio-scroll-arrow--next::after {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	margin-right: 2px;
}