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

// ===== 知识库 Drawer 样式 =====
// 说明：只定义页面特定的样式，不覆盖 Ant Design 和全局样式

// Drawer 容器特定样式
.knowledge-drawer {
    // Drawer 内部表单容器
    .drawer-form-container {
        height: 100%;
        padding: $spacing-4;  // 16px - 紧凑间距
        overflow-y: auto;

        // 区块标题 - 页面特定样式
        .icon-select-section {
            display: flex;
            align-items: center;
            gap: $spacing-4;
            padding: $spacing-4;
            background: $bg-tertiary;
            border-radius: $radius-xl;
            margin-bottom: $spacing-4;

            .section-icon {
                width: 48px;
                height: 48px;
                border-radius: $radius-lg;
                background: rgba(0, 93, 128, 0.1);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;

                .iconify {
                    font-size: $icon-2xl;  // 24px - 使用全局变量
                    color: $primary-color;
                }
            }

            .section-info {
                flex: 1;

                .section-title {
                    font-size: $font-lg;
                    font-weight: $font-weight-semibold;
                    color: $text-primary;
                    margin-bottom: $spacing-1;
                }

                .section-desc {
                    font-size: $font-sm;
                    color: $text-hint;
                    line-height: $line-height-base;
                }
            }
        }

        // 分割线 - 页面特定样式
        .section-divider {
            margin: $spacing-6 0 $spacing-5 0;

            &::before {
                content: '';
                display: inline-block;
                width: 4px;
                height: 16px;
                background: $primary-color;
                border-radius: 2px;
                margin-right: $spacing-2;
                vertical-align: middle;
            }

            span {
                font-size: $font-lg;
                font-weight: $font-weight-semibold;
                color: $text-primary;
            }
        }

        // 表单样式优化 - 使用全局变量
        .ant-form {
            .ant-form-item {
                margin-bottom: $spacing-4;

                .ant-form-item-label {
                    > label {
                        font-size: $font-md;
                        font-weight: $font-weight-medium;
                        color: $text-primary;
                    }
                }

                .ant-form-item-extra {
                    font-size: $font-sm;
                    color: $text-hint;
                    margin-top: $spacing-1;
                }
            }
        }

        // 切片方式单选样式 - 页面特定
        .splitting-radio {
            display: flex;
            width: 100%;

            .ant-radio-button-wrapper {
                flex: 1;
                text-align: center;
                height: 44px;
                line-height: 42px;
                border-radius: $radius-md;

                &:first-child {
                    border-radius: $radius-md 0 0 $radius-md;
                }

                &:last-child {
                    border-radius: 0 $radius-md $radius-md 0;
                }

                &::before {
                    display: none;
                }
            }
        }

        // 滚动条样式 - 使用全局隐藏式滚动条
        .hide-scrollbar();
    }
}
