/* ==========================================================================
   按钮组件系统 (Button Component System)
   ========================================================================== */

/* 按钮基础样式 */
.button {
    /* 布局 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);

    /* 尺寸 */
    padding: var(--spacing-2-5) var(--spacing-4);
    min-height: var(--button-height-sm);

    /* 边框与圆角 */
    border: var(--border-width-1) solid transparent;
    border-radius: var(--button-border-radius);

    /* 排版 */
    font-family: inherit;
    font-size: var(--button-font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-none);
    text-align: center;
    white-space: nowrap;

    /* 颜色与背景 */
    background-color: var(--color-neutral-bg);
    color: var(--color-neutral-text);

    /* 交互 */
    cursor: pointer;
    transition: all var(--transition-base);
    user-select: none;
    vertical-align: middle;

    /* 其他 */
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* ============================================================
   基础按钮类型 (使用颜色变量控制，通过CSS类名切换颜色主题)
   ============================================================ */

/* 主按钮基础样式 - 所有颜色的主按钮共用 */
.button--primary {
    color: white;
    box-shadow: 0 var(--size-0-5) 0 rgba(0, 0, 0, 0.045);
}

/* 默认蓝色主按钮 */
.button--primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.button--primary:hover,
.button--primary:focus {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: white;
}

.button--primary:active {
    background-color: var(--color-primary-active);
    border-color: var(--color-primary-active);
    transform: translateY(0);
}

/* 灰色 */
.button--gray {
    background-color: #FFFFFF;
    border-color: #DADFE9;
    color: #888895;
}

/* 紫色主按钮 */
.button--primary.button--accent-1 {
    background-color: var(--color-accent-1);
    border-color: var(--color-accent-1);
    box-shadow: 0 var(--size-0-5) 0 rgba(181, 109, 239, 0.1);
}

.button--primary.button--accent-1:hover,
.button--primary.button--accent-1:focus {
    background-color: var(--color-accent-1-hover);
    border-color: var(--color-accent-1-hover);
    color: white;
}

.button--primary.button--accent-1:active {
    background-color: var(--color-accent-1-active);
    border-color: var(--color-accent-1-active);
    color: white;
}

/* 浅蓝色主按钮 */
.button--primary.button--accent-2 {
    background-color: var(--color-accent-2);
    border-color: var(--color-accent-2);
    box-shadow: 0 var(--size-0-5) 0 rgba(8, 160, 247, 0.1);
}

.button--primary.button--accent-2:hover,
.button--primary.button--accent-2:focus {
    background-color: var(--color-accent-2-hover);
    border-color: var(--color-accent-2-hover);
    color: white;
}

.button--primary.button--accent-2:active {
    background-color: var(--color-accent-2-active);
    border-color: var(--color-accent-2-active);
    color: white;
}

/* 次按钮基础样式 */
.button--default {
    background-color: white;
    border-color: var(--color-neutral-border);
    color: var(--color-neutral-text);
}

/* 默认蓝色次按钮 */
.button--default:hover,
.button--default:focus {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.button--default:active {
    color: var(--color-primary-active);
    border-color: var(--color-primary-active);
}

/* 紫色次按钮 */
.button--default.button--accent-1 {
    color: var(--color-accent-1);
    border-color: var(--color-accent-1-border);
}

.button--default.button--accent-1:hover,
.button--default.button--accent-1:focus {
    color: var(--color-accent-1-hover);
    border-color: var(--color-accent-1);
    background-color: var(--color-accent-1-bg);
}

/* 浅蓝色次按钮 */
.button--default.button--accent-2 {
    color: var(--color-accent-2);
    border-color: var(--color-accent-2-border);
}

.button--default.button--accent-2:hover,
.button--default.button--accent-2:focus {
    color: var(--color-accent-2-hover);
    border-color: var(--color-accent-2);
    background-color: var(--color-accent-2-bg);
}

/* ============================================================
   黑色按钮系列 (改造自黑白按钮)
   ============================================================ */

/* 黑色主按钮 */
.button--black {
    background-color: var(--color-neutral-title);
    border-color: var(--color-neutral-title);
    color: white;
}

.button--black:hover,
.button--black:focus {
    background-color: var(--color-neutral-text);
    border-color: var(--color-neutral-text);
    color: white;
}

.button--black:active {
    background-color: var(--color-neutral-text-secondary);
    border-color: var(--color-neutral-text-secondary);
    color: white;
}

/* 黑色次按钮 (黑边框白底) */
.button--black-default {
    background-color: white;
    border-color: var(--color-neutral-title);
    color: var(--color-neutral-title);
}

.button--black-default:hover,
.button--black-default:focus {
    background-color: var(--color-neutral-bg-secondary);
    border-color: var(--color-neutral-text);
    color: var(--color-neutral-text);
}

/* 黑色文本按钮 */
.button--black-text {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-neutral-title);
}

.button--black-text:hover,
.button--black-text:focus {
    background-color: var(--color-neutral-bg-secondary);
    color: var(--color-neutral-title);
}

/* 黑色幽灵按钮 */
.button--black-ghost {
    background-color: transparent !important;
    border-color: var(--color-neutral-title);
    color: var(--color-neutral-title);
}

.button--black-ghost:hover,
.button--black-ghost:focus {
    background-color: var(--color-neutral-title) !important;
    color: white;
}

/* ============================================================
   虚线按钮
   ============================================================ */
.button--dashed {
    background-color: white;
    border: var(--border-width-1) dashed var(--color-neutral-border);
    color: var(--color-neutral-text);
}

/* 默认蓝色虚线按钮 */
.button--dashed:hover,
.button--dashed:focus {
    color: var(--color-primary);
    border-color: var(--color-primary);
    border-style: solid;
}

/* 紫色虚线按钮 */
.button--dashed.button--accent-1 {
    border-color: var(--color-accent-1-border);
    color: var(--color-accent-1);
}

.button--dashed.button--accent-1:hover,
.button--dashed.button--accent-1:focus {
    color: var(--color-accent-1);
    border-color: var(--color-accent-1);
    border-style: solid;
    background-color: var(--color-accent-1-bg);
}

/* 浅蓝色虚线按钮 */
.button--dashed.button--accent-2 {
    border-color: var(--color-accent-2-border);
    color: var(--color-accent-2);
}

.button--dashed.button--accent-2:hover,
.button--dashed.button--accent-2:focus {
    color: var(--color-accent-2);
    border-color: var(--color-accent-2);
    border-style: solid;
    background-color: var(--color-accent-2-bg);
}

.button-full {
    width: 100%;
}

/* ============================================================
   文本按钮
   ============================================================ */
.button--text {
    background-color: transparent;
    border-color: transparent;
    box-shadow: var(--shadow-none);
}

/* 默认蓝色文本按钮 */
.button--text {
    color: var(--color-primary);
}

.button--text:hover,
.button--text:focus {
    background-color: var(--color-neutral-bg-secondary);
    color: var(--color-primary-hover);
}

/* 紫色文本按钮 */
.button--text.button--accent-1 {
    color: var(--color-accent-1);
}

.button--text.button--accent-1:hover,
.button--text.button--accent-1:focus {
    color: var(--color-accent-1-hover);
    background-color: var(--color-accent-1-bg);
}

/* 浅蓝色文本按钮 */
.button--text.button--accent-2 {
    color: var(--color-accent-2);
}

.button--text.button--accent-2:hover,
.button--text.button--accent-2:focus {
    color: var(--color-accent-2-hover);
    background-color: var(--color-accent-2-bg);
}

/* ============================================================
   链接按钮
   ============================================================ */
.button--link {
    background-color: transparent;
    border-color: transparent;
    box-shadow: var(--shadow-none);
}

/* 默认蓝色链接按钮 */
.button--link {
    color: var(--color-link);
}

.button--link:hover,
.button--link:focus {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* 浅蓝色链接按钮 */
.button--link.button--accent-2 {
    color: var(--color-accent-2);
}

.button--link.button--accent-2:hover,
.button--link.button--accent-2:focus {
    color: var(--color-accent-2-hover);
    text-decoration: underline;
}

/* ============================================================
   幽灵按钮 (统一结构)
   ============================================================ */
.button--ghost {
    background-color: transparent !important;
    border-color: currentColor;
    color: inherit;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 主题色幽灵按钮 */
.button--ghost.button--primary {
    color: var(--color-primary);
}
.button--ghost.button--primary:hover,
.button--ghost.button--primary:focus {
    background-color: var(--color-primary) !important;
    color: white;
}

/* 幽灵成功按钮 */
.button--ghost.button--success {
    color: var(--color-success);
}
.button--ghost.button--success:hover,
.button--ghost.button--success:focus {
    background-color: var(--color-success) !important;
    color: white;
}

/* 幽灵警告按钮 */
.button--ghost.button--warning {
    color: var(--color-warning);
}
.button--ghost.button--warning:hover,
.button--ghost.button--warning:focus {
    background-color: var(--color-warning) !important;
    color: white;
}

/* 幽灵危险按钮 */
.button--ghost.button--danger {
    color: var(--color-error);
}
.button--ghost.button--danger:hover,
.button--ghost.button--danger:focus {
    background-color: var(--color-error) !important;
    color: white;
}

/* 幽灵黑色按钮 */
.button--ghost.button--black {
    color: var(--color-neutral-title);
}
.button--ghost.button--black:hover,
.button--ghost.button--black:focus {
    background-color: var(--color-neutral-title) !important;
    color: white;
}

/* 紫色幽灵按钮 */
.button--ghost.button--accent-1 {
    color: var(--color-accent-1);
}
.button--ghost.button--accent-1:hover,
.button--ghost.button--accent-1:focus {
    background-color: var(--color-accent-1) !important;
    color: white;
}

/* 浅蓝色幽灵按钮 */
.button--ghost.button--accent-2 {
    color: var(--color-accent-2);
}
.button--ghost.button--accent-2:hover,
.button--ghost.button--accent-2:focus {
    background-color: var(--color-accent-2) !important;
    color: white;
}

/* ============================================================
   按钮状态色 (所有颜色统一)
   ============================================================ */

/* 成功状态 */
.button--primary.button--success {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.button--primary.button--success:hover {
    background-color: var(--color-success-hover);
    border-color: var(--color-success-hover);
}

/* 警告状态 */
.button--primary.button--warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}

.button--primary.button--warning:hover {
    background-color: var(--color-warning-hover);
    border-color: var(--color-warning-hover);
}

/* 危险状态 */
.button--primary.button--danger {
    background-color: var(--color-error);
    border-color: var(--color-error);
}

.button--primary.button--danger:hover {
    background-color: var(--color-error-hover);
    border-color: var(--color-error-hover);
}

/* 白色主按钮 */
.button--white {
    background-color: var(--color-neutral-bg);
    border-color: var(--color-neutral-bg);
    color: var(--color-neutral-title);
}

.button--white:hover,
.button--white:focus {
    background-color: var(--color-neutral-bg-secondary);
    border-color: var(--color-neutral-bg-secondary);
    color: var(--color-neutral-title);
}

.button--white:active {
    background-color: var(--color-neutral-bg-tertiary);
    border-color: var(--color-neutral-bg-tertiary);
    color: var(--color-neutral-title);
    transform: translateY(0);
}

/* 白色次按钮 */
.button--white-default {
    background-color: transparent;
    border-color: var(--color-neutral-bg);
    color: var(--color-neutral-bg);
}

.button--white-default:hover,
.button--white-default:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-neutral-bg);
    color: var(--color-neutral-bg);
}

/* 白色文本按钮 */
.button--white-text {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-neutral-bg);
    box-shadow: var(--shadow-none);
}

.button--white-text:hover,
.button--white-text:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-neutral-bg);
}

/* 白色幽灵按钮 */
.button--white-ghost {
    background-color: transparent !important;
    border-color: var(--color-neutral-bg);
    color: var(--color-neutral-bg);
}

.button--white-ghost:hover,
.button--white-ghost:focus {
    background-color: var(--color-neutral-bg) !important;
    color: var(--color-neutral-title);
    border-color: var(--color-neutral-bg);
}

/* 白色虚线按钮 */
.button--white-dashed {
    background-color: transparent;
    border: var(--border-width-1) dashed var(--color-neutral-border-secondary);
    color: var(--color-neutral-bg);
}

.button--white-dashed:hover,
.button--white-dashed:focus {
    border-style: solid;
    border-color: var(--color-neutral-bg);
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-neutral-bg);
}

/* 白色链接按钮 */
.button--white-link {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-neutral-bg);
    box-shadow: var(--shadow-none);
}

.button--white-link:hover,
.button--white-link:focus {
    color: var(--color-neutral-bg);
    text-decoration: underline;
    background-color: transparent;
}

/* 白色按钮的禁用状态 */
.button--white:disabled,
.button--white.button--disabled,
.button--white-default:disabled,
.button--white-default.button--disabled,
.button--white-text:disabled,
.button--white-text.button--disabled {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    cursor: not-allowed;
    box-shadow: var(--shadow-none) !important;
    pointer-events: none;
    opacity: 0.6;
}

/* 白色幽灵按钮的禁用状态 */
.button--white-ghost:disabled,
.button--white-ghost.button--disabled {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    opacity: 0.6;
}

/* 白色按钮的焦点状态 */
.button--white:focus-visible {
    box-shadow: var(--shadow-focus);
}

/* 白色幽灵按钮的焦点状态 */
.button--white-ghost:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

/* ============================================================
   按钮尺寸 (所有颜色统一)
   ============================================================ */
.button--large {
    padding: var(--spacing-3-5) var(--spacing-5);
    font-size: var(--button-font-size-lg);
    border-radius: var(--radius-md);
}

.button--small {
    padding: var(--spacing-1-5) var(--spacing-3);
    font-size: var(--button-font-size-sm);
    border-radius: var(--radius-sm);
}

/* ============================================================
   块级按钮 (所有颜色统一)
   ============================================================ */
.button--block {
    width: var(--size-full);
    display: flex;
}

/* ============================================================
   加载状态 (所有颜色统一)
   ============================================================ */
.button--loading {
    position: relative;
    pointer-events: none;
    opacity: 0.9;
}

.button--loading::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--z-index-10);
    background-color: inherit;
}

.button--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size-4);
    height: var(--size-4);
    margin: calc(-1 * var(--size-2)) 0 0 calc(-1 * var(--size-2));
    border: var(--border-width-2) solid transparent;
    border-top-color: currentColor;
    border-radius: var(--radius-full);
    animation: button-spin var(--animation-duration-slow) linear infinite;
    z-index: var(--z-index-20);
}

@keyframes button-spin {
    to { transform: rotate(360deg); }
}

.button--loading .button__content {
    opacity: 0;
}

/* ============================================================
   图标按钮 (所有颜色统一)
   ============================================================ */
.button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-none);
}

.button__icon:first-child:not(:last-child) {
    margin-right: var(--spacing-1);
}

.button__icon:last-child:not(:first-child) {
    margin-left: var(--spacing-1);
}

.button--icon-only {
    min-width: var(--button-height-base);
    padding: var(--spacing-1-5);
    font-size: var(--font-size-base);
}

.button--icon-only.button--large {
    min-width: var(--button-height-lg);
    padding: var(--spacing-2);
    font-size: var(--font-size-lg);
}

.button--icon-only.button--small {
    min-width: var(--button-height-sm);
    padding: var(--spacing-0-5);
    font-size: var(--font-size-sm);
}

/* ============================================================
   禁用状态 (所有颜色统一)
   ============================================================ */
.button:disabled,
.button--disabled {
    background-color: var(--color-neutral-bg-disabled) !important;
    border-color: var(--color-neutral-border) !important;
    color: var(--color-neutral-text-tertiary) !important;
    cursor: not-allowed;
    box-shadow: var(--shadow-none) !important;
    pointer-events: none;
    opacity: 0.6;
}

/* 特殊处理幽灵按钮的禁用状态 */
.button--ghost:disabled,
.button--ghost.button--disabled {
    background-color: transparent !important;
    opacity: 0.4;
}

/* ============================================================
   焦点状态
   ============================================================ */
.button:focus {
    outline: 0;
}

.button:focus-visible {
    box-shadow: var(--shadow-focus);
}

/* 不同颜色的焦点状态 */
.button--accent-1:focus-visible {
    box-shadow: var(--shadow-focus-success);
}

.button--accent-2:focus-visible {
    box-shadow: var(--shadow-focus-success);
}

.button--error:focus-visible,
.button--danger:focus-visible {
    box-shadow: var(--shadow-focus-error);
}

.button--warning:focus-visible {
    box-shadow: var(--shadow-focus-warning);
}

/* ============================================================
   响应式调整
   ============================================================ */
@media (max-width: 768px) {
    .button {
        padding: var(--spacing-1-5) var(--spacing-3-5);
        min-height: 30px;
        font-size: var(--font-size-sm);
    }

    .button--large {
        padding: var(--spacing-2) var(--spacing-4);
        font-size: var(--font-size-base);
    }

    .button--small {
        padding: var(--spacing-0-5) var(--spacing-2-5);
        font-size: var(--font-size-xs);
    }
}