// 导入全局样式变量
@import '@/styles/variables.scss';

// GuideTips 引导提示组件 - 遵循全局样式规则
.guide-tips-wrapper {
    padding: 0;
    margin: 0;
    margin-bottom: $spacing-4;  // 与下一行的间距：16px

    // 当紧跟在 .list-header.with-tips 后面时，确保无上边距
    // 使用独立选择器避免嵌套导致的样式重复
    .list-header.with-tips + .guide-tips-wrapper {
        margin-top: 0;
    }

    .guide-tips-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: $spacing-2;
        padding: $spacing-2 0;

        &:hover {
            // 只让灯泡图标有轻微效果，文字颜色不变
            .guide-tips-icon {
                transform: scale(1.15);
                filter: brightness(1.1);
            }
        }

        .guide-tips-title {
            display: flex;
            align-items: center;
            font-size: $font-sm;
            color: $text-primary;
            // 移除文字颜色过渡，保持静态

            .guide-tips-icon {
                font-size: $icon-lg;
                color: #FAAD14;
                margin-right: $spacing-2;
                transition: transform 0.2s ease, filter 0.2s ease;
            }
        }

        .guide-tips-close {
            color: $text-hint;
            cursor: pointer;
            display: flex;
            align-items: center;
            font-size: $icon-lg;
            transition: $transition-base;

            &:hover {
                color: $primary-color;
            }

            .guide-tips-arrow {
                font-size: 20px;
                line-height: 1;
            }
        }
    }

    // 使用全局 Row/Col 布局
    .guide-tips-row {
        margin: 0;
    }

    // 全局卡片样式优化
    .guide-tips-card {
        background: $bg-secondary;
        border-radius: $radius-lg;
        box-shadow: $shadow-sm;
        border: 1px solid $border-light;
        transition: $transition-base;
        height: 100%;

        &:hover {
            box-shadow: $shadow-md;
            // 移除边框颜色变化，保持静态
        }

        // 卡片头部
        .guide-tips-card-title {
            font-size: $font-md;
            font-weight: $font-weight-semibold;
            color: $text-primary;
            margin-bottom: $spacing-2;
            line-height: $line-height-tight;  // 1.1
        }

        // 卡片内容
        .guide-tips-card-description {
            font-size: $font-sm;
            color: $text-secondary;
            line-height: $line-height-base;  // 1.3
            flex: 1;
        }

        // Step 编号
        .guide-tips-card-step {
            font-size: $font-sm;
            color: $primary-color;
            font-weight: $font-weight-semibold;
            margin-top: $spacing-2;
            text-align: right;
            line-height: $line-height-tight;  // 1.1
        }
    }

    // 不同步骤的渐变背景（使用全局色板）
    .guide-tips-card-step-1 {
        background: linear-gradient(90deg, rgba(230, 244, 255, 0.8) 0%, rgba(240, 247, 255, 0.8) 100%);
    }

    .guide-tips-card-step-2 {
        background: linear-gradient(90deg, rgba(230, 255, 249, 0.8) 0%, rgba(240, 255, 254, 0.8) 100%);
    }

    .guide-tips-card-step-3 {
        background: linear-gradient(90deg, rgba(255, 247, 230, 0.8) 0%, rgba(255, 250, 240, 0.8) 100%);
    }

    .guide-tips-card-step-4 {
        background: linear-gradient(90deg, rgba(245, 243, 255, 0.8) 0%, rgba(250, 247, 255, 0.8) 100%);
    }
}

// 响应式适配 - 遵循全局断点
@media (max-width: $screen-md) {
    .guide-tips-wrapper {
        .guide-tips-row {
            margin: 0;
        }
    }
}

@media (max-width: $screen-sm) {
    .guide-tips-wrapper {
        .guide-tips-header {
            .guide-tips-title {
                font-size: $font-xs;
            }
        }
    }
}
