/**
 * 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;
    }
}