/* ============================================================
   按钮.css — VA-UI PC & H5 按钮组件
   对标 Ant Design 5.0 / Mobile Button 规范与交互动画
   支持类型: primary / default / danger / dashed / text / text-danger / link
   支持尺寸: sm / default / lg
   状态: hover / active / disabled / loading / block / circle
   ============================================================ */

/* --- 基础按钮规范 --- */
.va-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--va-btn-height, 32px);
  padding: 0 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5714;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--va-btn-radius, 6px);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  box-sizing: border-box;
  min-width: 60px;
}

/* 交互点击缩放动画 */
.va-btn:active {
  transform: scale(0.98);
}

.va-btn:focus-visible {
  outline: 2px solid #91caef;
  outline-offset: 1px;
}

/* --- 尺寸规范 --- */
.va-btn-sm,
.va-btn-pc-sm {
  height: 28px;
  padding: 0 8px;
  font-size: 13px;
  border-radius: 4px;
  min-width: auto;
}

.va-btn-lg {
  height: 40px;
  padding: 0 18px;
  font-size: 16px;
  border-radius: 8px;
}

/* --- Primary 主按钮 --- */
.va-btn-primary {
  background: var(--va-primary, #396FFF);
  color: #FFFFFF;
  border-color: var(--va-primary, #396FFF);
  box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
}

.va-btn-primary:hover {
  background: var(--va-primary-hover, #5B8AFF);
  border-color: var(--va-primary-hover, #5B8AFF);
  color: #FFFFFF;
}

.va-btn-primary:active {
  background: var(--va-primary-active, #2B54D9);
  border-color: var(--va-primary-active, #2B54D9);
  color: #FFFFFF;
  transform: scale(0.98);
}

/* --- Default 次要/默认按钮 --- */
.va-btn-default {
  background: #FFFFFF;
  color: var(--va-text-primary, #1D2129);
  border-color: var(--va-border, #D9D9D9);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
}

.va-btn-default:hover {
  color: var(--va-primary, #396FFF);
  border-color: var(--va-primary, #396FFF);
  background: #FFFFFF;
}

.va-btn-default:active {
  color: var(--va-primary-active, #2B54D9);
  border-color: var(--va-primary-active, #2B54D9);
  background: #F2F5FF;
  transform: scale(0.98);
}

/* --- Danger 危险按钮 --- */
.va-btn-danger {
  background: var(--va-error, #FF4D4F);
  color: #FFFFFF;
  border-color: var(--va-error, #FF4D4F);
  box-shadow: 0 2px 0 rgba(255, 38, 5, 0.06);
}

.va-btn-danger:hover {
  background: #FF7875;
  border-color: #FF7875;
  color: #FFFFFF;
}

.va-btn-danger:active {
  background: #D9363E;
  border-color: #D9363E;
  color: #FFFFFF;
  transform: scale(0.98);
}

/* --- Dashed 虚线按钮 --- */
.va-btn-dashed {
  background: #FFFFFF;
  color: var(--va-text-primary, #1D2129);
  border-color: var(--va-border, #D9D9D9);
  border-style: dashed;
}

.va-btn-dashed:hover {
  color: var(--va-primary, #396FFF);
  border-color: var(--va-primary, #396FFF);
}

.va-btn-dashed:active {
  color: var(--va-primary-active, #2B54D9);
  border-color: var(--va-primary-active, #2B54D9);
  background: #F2F5FF;
  transform: scale(0.98);
}

/* --- Text 文本按钮 --- */
.va-btn-text {
  background: transparent;
  color: var(--va-text-primary, #1D2129);
  border-color: transparent;
  min-width: auto;
  padding: 0 8px;
  box-shadow: none;
}

.va-btn-text:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--va-primary, #396FFF);
}

.va-btn-text:active {
  background: rgba(0, 0, 0, 0.1);
  color: var(--va-primary-active, #2B54D9);
  transform: scale(0.98);
}

/* --- Text Danger 危险文本按钮 --- */
.va-btn-text-danger {
  background: transparent;
  color: var(--va-error, #FF4D4F);
  border-color: transparent;
  min-width: auto;
  padding: 0 8px;
  box-shadow: none;
}

.va-btn-text-danger:hover {
  background: rgba(255, 77, 79, 0.06);
  color: #FF7875;
}

.va-btn-text-danger:active {
  background: rgba(255, 77, 79, 0.12);
  color: #D9363E;
  transform: scale(0.98);
}

/* --- Link 链接按钮 --- */
.va-btn-link {
  background: transparent;
  color: var(--va-primary, #396FFF);
  border-color: transparent;
  min-width: auto;
  padding: 0 4px;
  box-shadow: none;
}

.va-btn-link:hover {
  color: var(--va-primary-hover, #5B8AFF);
}

.va-btn-link:active {
  color: var(--va-primary-active, #2B54D9);
}

/* --- Block 全宽按钮 --- */
.va-btn-block {
  display: flex;
  width: 100%;
}

/* --- 按钮组 --- */
.va-btn-group {
  display: flex;
  gap: 8px;
}

.va-btn-group .va-btn {
  flex: 1;
}

/* --- 禁用状态 --- */
.va-btn.va-disabled,
.va-btn[disabled] {
  background: #F5F5F5 !important;
  color: #BFBFBF !important;
  border-color: #D9D9D9 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.va-btn-primary.va-disabled,
.va-btn-primary[disabled] {
  background: #F5F5F5 !important;
  color: #BFBFBF !important;
  border-color: #D9D9D9 !important;
}

/* --- Loading 状态 --- */
.va-btn-loading {
  pointer-events: none;
  position: relative;
  opacity: 0.75;
}

.va-btn-loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: va-spin 0.6s linear infinite;
  margin-right: 6px;
  flex-shrink: 0;
}

@keyframes va-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- 圆形按钮 --- */
.va-btn-circle {
  border-radius: 50%;
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
}

/* --- 按钮水波纹 --- */
.va-btn .va-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: va-ripple-anim 0.4s linear;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.va-btn-default .va-ripple,
.va-btn-dashed .va-ripple,
.va-btn-text .va-ripple {
  background: rgba(0, 0, 0, 0.08);
}

@keyframes va-ripple-anim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}