/**
 * Universal Button Styles - 通用按钮样式系统
 * 使用CSS变量统一管理所有按钮样式
 *
 * @package     block-canvas Child
 * @subpackage  Assets
 * @author      JoshuaWang2019
 * @version     1.0.0
 * @since       2025-06-29
 */

/* ==========================================================================
   基础按钮样式
   ========================================================================== */
.btn-base {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--spacing-sm) !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  border: none !important;
  border-radius: var(--card-radius-small) !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
  white-space: nowrap !important;
  user-select: none !important;
  outline: none !important;
}

.btn-base:focus {
  box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.2) !important;
}

.btn-base:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ==========================================================================
   主要按钮样式
   ========================================================================== */
.btn-primary {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-color) !important;
}

.btn-primary:hover:not(:disabled) {
  transform: var(--btn-primary-hover-transform) !important;
  box-shadow: var(--btn-primary-hover-shadow) !important;
  color: var(--btn-primary-color) !important;
  text-decoration: none !important;
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0) !important;
}

/* ==========================================================================
   次要按钮样式
   ========================================================================== */
.btn-secondary {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-color) !important;
}

.btn-secondary:hover:not(:disabled) {
  transform: var(--btn-primary-hover-transform) !important;
  box-shadow: var(--btn-secondary-hover-shadow) !important;
  color: var(--btn-secondary-color) !important;
  text-decoration: none !important;
}

.btn-secondary:active:not(:disabled) {
  transform: translateY(0) !important;
}

/* ==========================================================================
   轮廓按钮样式
   ========================================================================== */
.btn-outline {
  background: transparent !important;
  border: var(--btn-outline-border) !important;
  color: var(--btn-outline-color) !important;
}

.btn-outline:hover:not(:disabled) {
  background: var(--btn-outline-hover-bg) !important;
  color: var(--btn-outline-hover-color) !important;
  transform: var(--btn-primary-hover-transform) !important;
  text-decoration: none !important;
}

.btn-outline:active:not(:disabled) {
  transform: translateY(0) !important;
}

/* ==========================================================================
   按钮尺寸变体
   ========================================================================== */
.btn-sm {
  padding: var(--spacing-sm) var(--spacing-md) !important;
  font-size: var(--font-size-sm) !important;
  border-radius: 8px !important;
}

.btn-lg {
  padding: var(--spacing-lg) var(--spacing-xl) !important;
  font-size: var(--font-size-lg) !important;
  border-radius: var(--card-radius) !important;
}

.btn-xl {
  padding: var(--spacing-xl) var(--spacing-2xl) !important;
  font-size: var(--font-size-xl) !important;
  border-radius: var(--card-radius) !important;
}

/* ==========================================================================
   按钮宽度变体
   ========================================================================== */
.btn-block {
  width: 100% !important;
}

.btn-auto {
  width: auto !important;
}

/* ==========================================================================
   图标按钮
   ========================================================================== */
.btn-icon-only {
  padding: var(--spacing-md) !important;
  aspect-ratio: 1 !important;
}

.btn-icon-left .btn-icon {
  margin-right: var(--spacing-xs) !important;
}

.btn-icon-right .btn-icon {
  margin-left: var(--spacing-xs) !important;
}

/* ==========================================================================
   特殊状态按钮
   ========================================================================== */
.btn-success {
  background: var(--theme-gradient-success) !important;
  color: #ffffff !important;
}

.btn-warning {
  background: linear-gradient(
    135deg,
    var(--theme-warning) 0%,
    #dd6b20 100%
  ) !important;
  color: #ffffff !important;
}

.btn-error {
  background: linear-gradient(
    135deg,
    var(--theme-error) 0%,
    #e53e3e 100%
  ) !important;
  color: #ffffff !important;
}

.btn-info {
  background: linear-gradient(
    135deg,
    var(--theme-info) 0%,
    #3182ce 100%
  ) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   WordPress特定按钮适配
   ========================================================================== */

/* 搜索按钮 */
.search-submit-btn,
.hymns-search-btn,
.ebooks-search-btn,
.messages-search-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--spacing-sm) !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  border: none !important;
  border-radius: var(--card-radius-small) !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
  white-space: nowrap !important;
  user-select: none !important;
  outline: none !important;
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-color) !important;
}

.search-submit-btn:hover:not(:disabled),
.hymns-search-btn:hover:not(:disabled),
.ebooks-search-btn:hover:not(:disabled),
.messages-search-btn:hover:not(:disabled) {
  transform: var(--btn-primary-hover-transform) !important;
  box-shadow: var(--btn-primary-hover-shadow) !important;
  color: var(--btn-primary-color) !important;
  text-decoration: none !important;
}

/* 通用提交按钮 */
button[type='submit']:not(.search-submit-btn):not(.hymns-search-btn):not(
    .ebooks-search-btn
  ):not(.messages-search-btn),
input[type='submit'],
.wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--spacing-sm) !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  border: none !important;
  border-radius: var(--card-radius-small) !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
  white-space: nowrap !important;
  user-select: none !important;
  outline: none !important;
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-color) !important;
}

button[type='submit']:hover:not(:disabled),
input[type='submit']:hover:not(:disabled),
.wp-block-button__link:hover {
  transform: var(--btn-primary-hover-transform) !important;
  box-shadow: var(--btn-primary-hover-shadow) !important;
  color: var(--btn-primary-color) !important;
  text-decoration: none !important;
}

/* 分页按钮 */
.page-numbers,
.pagination a,
.pagination span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--spacing-sm) !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  border-radius: var(--card-radius-small) !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
  white-space: nowrap !important;
  user-select: none !important;
  outline: none !important;
  background: transparent !important;
  border: var(--btn-outline-border) !important;
  color: var(--btn-outline-color) !important;
}

.page-numbers:hover,
.pagination a:hover,
.pagination span:hover {
  background: var(--btn-outline-hover-bg) !important;
  color: var(--btn-outline-hover-color) !important;
  transform: var(--btn-primary-hover-transform) !important;
  text-decoration: none !important;
}

.page-numbers.current,
.pagination .current {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-color) !important;
  border: 2px solid var(--theme-primary) !important;
}

/* 清除搜索按钮 */
.clear-search {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--spacing-sm) !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  border-radius: 8px !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
  white-space: nowrap !important;
  user-select: none !important;
  outline: none !important;
  background: transparent !important;
  border: 1px solid var(--theme-primary) !important;
  color: var(--btn-outline-color) !important;
}

.clear-search:hover {
  background: var(--btn-outline-hover-bg) !important;
  color: var(--btn-outline-hover-color) !important;
  transform: var(--btn-primary-hover-transform) !important;
  text-decoration: none !important;
}

/* ==========================================================================
   响应式适配
   ========================================================================== */
@media (max-width: 768px) {
  .btn-base {
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-size: var(--font-size-sm) !important;
  }

  .btn-lg {
    padding: var(--spacing-md) var(--spacing-lg) !important;
    font-size: var(--font-size-base) !important;
  }

  .btn-xl {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
    font-size: var(--font-size-lg) !important;
  }

  .btn-responsive {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   动画禁用（无障碍支持）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn-base {
    transition: none !important;
  }

  .btn-base:hover:not(:disabled) {
    transform: none !important;
  }
}

/* ==========================================================================
   高对比度模式支持
   ========================================================================== */
@media (prefers-contrast: high) {
  .btn-base {
    border: 2px solid var(--theme-gray-800) !important;
  }

  .btn-primary {
    background: var(--theme-gray-800) !important;
    color: #ffffff !important;
  }

  .btn-outline {
    border: 2px solid var(--theme-gray-800) !important;
    color: var(--theme-gray-800) !important;
  }
}