/* ==========================================================================
   按钮组件 (Button Component)
   ========================================================================== */

.zuoekai-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  
  font-family: var(--zuoekai-font-family-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  
  border-radius: var(--zuoekai-radius-sm);
  border: 1px solid transparent;
  
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  
  transition: 
    background-color var(--zuoekai-motion-duration-fast) var(--zuoekai-motion-ease-out),
    color var(--zuoekai-motion-duration-fast) var(--zuoekai-motion-ease-out),
    border-color var(--zuoekai-motion-duration-fast) var(--zuoekai-motion-ease-out),
    box-shadow var(--zuoekai-motion-duration-fast) var(--zuoekai-motion-ease-out),
    transform var(--zuoekai-motion-duration-fast) var(--zuoekai-motion-ease-out);
}

/* 聚焦状态 (Focus State) */
.zuoekai-button:focus-visible {
  outline: none;
  box-shadow: var(--zuoekai-focus-ring);
}

/* 禁用状态 (Disabled State) */
.zuoekai-button:disabled,
.zuoekai-button--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* 激活/按下效果 (通用) */
.zuoekai-button:active:not(:disabled) {
  transform: translateY(1px);
}

/* ==========================================================================
   变体 (Variants)
   ========================================================================== */

/* 主要按钮 (Primary - 默认) - 渐变风格 */
.zuoekai-button--primary {
  background: linear-gradient(135deg, var(--zuoekai-color-theme-gradient-start), var(--zuoekai-color-theme-gradient-end));
  color: #ffffff; /* Always white on gradient */
  box-shadow: var(--zuoekai-shadow-sm);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* 可选：添加微妙的内部发光或高光 */
.zuoekai-button--primary::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: -1;
}

.zuoekai-button--primary:hover:not(:disabled) {
  box-shadow: var(--zuoekai-shadow-brand-glow);
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.zuoekai-button--primary:hover:not(:disabled)::before {
  opacity: 1;
}

.zuoekai-button--primary:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(1.0);
  box-shadow: var(--zuoekai-shadow-sm);
}

/* 次要按钮 (Secondary - 描边/表面色) */
.zuoekai-button--secondary {
  background-color: var(--zuoekai-color-surface-panel);
  border-color: var(--zuoekai-color-border);
  color: var(--zuoekai-color-text);
  box-shadow: var(--zuoekai-shadow-sm);
}

.zuoekai-button--secondary:hover:not(:disabled) {
  background-color: var(--zuoekai-color-surface-page);
  border-color: var(--zuoekai-color-border-strong);
}

/* 幽灵按钮 (Ghost - 透明) */
.zuoekai-button--ghost {
  background-color: transparent;
  color: var(--zuoekai-color-text);
}

.zuoekai-button--ghost:hover:not(:disabled) {
  background-color: var(--zuoekai-color-action-hover-bg);
}

/* 文本按钮 (Text - 轻量文字操作) */
.zuoekai-button--text {
  height: auto;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--zuoekai-color-brand-500);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  justify-content: flex-start;
}

.zuoekai-button--text:hover:not(:disabled) {
  background: none;
  box-shadow: none;
  color: var(--zuoekai-color-brand-700);
}

.zuoekai-button--text:active:not(:disabled) {
  transform: none;
}

/* 危险按钮 (Danger) */
.zuoekai-button--danger {
  background-color: var(--zuoekai-color-error-600);
  color: var(--zuoekai-color-text-inverse);
  box-shadow: var(--zuoekai-shadow-sm);
}

.zuoekai-button--danger:hover:not(:disabled) {
  filter: brightness(0.9); /* Simple darken */
  box-shadow: var(--zuoekai-shadow-md);
}

/* ==========================================================================
   尺寸 (Sizes)
   ========================================================================== */

/* 小号 (Small) */
.zuoekai-button--sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

/* 中号 (Medium - 默认) */
.zuoekai-button--md {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
}

/* 大号 (Large) */
.zuoekai-button--lg {
  height: 48px;
  padding: 0 24px;
  font-size: 16px;
  border-radius: var(--zuoekai-radius-md);
}

/* 仅图标 (Icon Only) */
.zuoekai-button--icon-only {
  padding: 0;
  width: 40px; /* Match height */
}
.zuoekai-button--sm.zuoekai-button--icon-only { width: 32px; }
.zuoekai-button--lg.zuoekai-button--icon-only { width: 48px; }

/* Block - full width */
.zuoekai-button--block {
  width: 100%;
}

/* 按钮内图标 (Icon inside button) */
.zuoekai-button__icon {
  width: 18px;
  height: 18px;
  stroke-width: 2px;
}