/**
 * 通用 MD3 按钮规范（sanxio 扩展）
 * - 统一按钮高度 / 圆角 / 字号 / 内边距
 * - 支持：实心、描边、文字、图标按钮
 * - 通过 CSS 变量可微调不同场景尺寸，而视觉保持一致
 */

/* ===== 基础变量（可按需在页面覆盖） ===== */
:root {
	/* 高度与圆角 */
	--md3-btn-height: 36px;
	--md3-btn-radius: 999px;
	/* 内边距 */
	--md3-btn-padding-x: 16px;
	--md3-btn-gap: 6px;
	/* 字体 */
	--md3-btn-font-size: 13px;
	--md3-btn-font-weight: 500;
}

/* ===== 基础按钮 ===== */
.md3-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--md3-btn-gap);
	min-height: var(--md3-btn-height);
	padding: 0 var(--md3-btn-padding-x);
	border-radius: var(--md3-btn-radius);
	font-size: var(--md3-btn-font-size);
	font-weight: var(--md3-btn-font-weight);
	line-height: 1;
	box-sizing: border-box;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	border: none;
	background: transparent;
	color: inherit;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.1s ease;
}

.md3-btn:disabled,
.md3-btn[aria-disabled="true"] {
	background: var(--md3-color-surface-container-high, #e1e2e6) !important;
	color: var(--md3-color-on-surface-variant, #666) !important;
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
	box-shadow: none !important;
}

/* 图标 + 文字 */
.md3-btn .material-symbols-outlined,
.md3-btn .icon {
	font-size: 18px;
	line-height: 1;
	transform: translateY(1px);
}

/* ===== 变体：实心按钮（Filled） ===== */
.md3-btn--filled {
	background: var(--md3-color-primary, var(--md-sys-color-primary, #005fb8));
	color: var(--md3-color-on-primary, var(--md-sys-color-on-primary, #ffffff));
	box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.md3-btn--filled:hover {
	background: var(--md3-color-primary-dark, #004578);
	color: var(--md3-color-on-primary, #ffffff);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .22);
}

.md3-btn--filled:active {
	transform: translateY(1px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}

/* ===== 变体：描边按钮（Outlined） ===== */
.md3-btn--outlined {
	border: 1px solid var(--md-sys-color-outline-variant, #c7d7ea);
	background: var(--md-sys-color-surface, #ffffff);
	color: var(--md-sys-color-on-surface-variant, #49454f);
}

.md3-btn--outlined:hover {
	border-color: var(--md-sys-color-primary, #1976d2);
	background: var(--md-sys-color-primary-container, #d0e4ff);
	color: var(--md-sys-color-on-primary-container, #001d35);
}

.md3-btn--outlined:active {
	transform: translateY(1px);
}

/* ===== 变体：文字按钮（Text） ===== */
.md3-btn--text {
	background: transparent;
	color: var(--md-sys-color-primary, #1976d2);
}

.md3-btn--text:hover {
	background: rgba(25, 118, 210, .06);
}

.md3-btn--text:active {
	transform: translateY(1px);
}

/* ===== 尺寸：小号 / 大号 ===== */
.md3-btn--sm {
	--md3-btn-height: 30px;
	--md3-btn-padding-x: 12px;
	--md3-btn-font-size: 12px;
}

.md3-btn--lg {
	--md3-btn-height: 40px;
	--md3-btn-padding-x: 20px;
	--md3-btn-font-size: 14px;
}

/* ===== 图标按钮（仅图标） ===== */
.md3-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: none;
	background: var(--md-sys-color-surface, #ffffff);
	color: var(--md-sys-color-on-surface-variant, #49454f);
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.1s ease;
}

.md3-icon-btn .material-symbols-outlined,
.md3-icon-btn .icon {
	font-size: 22px;
	line-height: 1;
}

.md3-icon-btn:hover {
	background: var(--md-sys-color-surface-container-high, #e9f1fb);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.md3-icon-btn:active {
	transform: translateY(1px);
}

/* ===== 容器：多按钮水平排列（自动等宽） ===== */
.md3-btn-group {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.md3-btn-group .md3-btn {
	flex: 1 1 0;
}

@media (max-width: 767px) {
	.md3-btn-group {
		gap: 8px;
	}
	.md3-btn {
		--md3-btn-height: 36px;
		--md3-btn-padding-x: 14px;
	}
}

/* 深色主题下的按钮对比度优化 */
:root[data-theme="dark"] .md3-btn--filled,
:root.theme-dark .md3-btn--filled {
	background: var(--md-sys-color-primary, #90caf9);
	color: var(--md-sys-color-on-primary, #001f33);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

:root[data-theme="dark"] .md3-btn--filled:hover,
:root.theme-dark .md3-btn--filled:hover {
	background: color-mix(in srgb, var(--md-sys-color-primary) 90%, black);
}

:root[data-theme="dark"] .md3-btn--outlined,
:root.theme-dark .md3-btn--outlined {
	border-color: var(--md-sys-color-outline-variant, #90caf9);
	background: transparent;
	color: var(--md-sys-color-primary, #90caf9);
}

:root[data-theme="dark"] .md3-btn--outlined:hover,
:root.theme-dark .md3-btn--outlined:hover {
	background: rgba(144, 202, 249, .16);
}

/* ===== 卡片内按钮：统一风格 ===== */
/* 卡片主操作按钮（例如：立即购买、提交） */
.md3-card-btn--primary {
	/* 直接使用 filled 变体的配色，只在卡片里挂语义类，方便后期批量调整 */
}

/* 卡片次要按钮（例如：更多、查看详情） */
.md3-card-btn--secondary {
	/* 基于描边按钮，略降低对比度 */
	border-color: var(--md-sys-color-outline-variant, #c7d7ea);
	color: var(--md-sys-color-on-surface-variant, #49454f);
}

.md3-card-btn--secondary:hover {
	border-color: var(--md-sys-color-primary, #1976d2);
	color: var(--md-sys-color-primary, #1976d2);
}

/* 卡片轻量操作按钮（文字型，如：查看全部） */
.md3-card-btn--text {
	padding-inline: 8px;
	--md3-btn-height: 30px;
}

/* 卡片中的小标签式按钮 */
.md3-card-btn--chip {
	--md3-btn-height: 30px;
	--md3-btn-padding-x: 10px;
	--md3-btn-font-size: 12px;
}