/**
 * ContentEditor - Default Theme
 * 默认主题 - 只包含颜色变量和主题特定样式
 * 布局样式在 content-editor-core.css 中定义
 */

:root {
    /* 颜色变量 */
    --editor-bg: #ffffff;
    --editor-text: #212529;
    --editor-border: #ddd;
    --editor-border-focus: #3a6ff2;
    
    --toolbar-bg: #f8f9fa;
    --toolbar-border: #ddd;
    
    --button-bg: #fff;
    --button-hover-bg: #e9ecef;
    --button-active-bg: #dee2e6;
    --button-text: #495057;
    --button-border: #ced4da;
    
    --comment-bg: #fff9e6;
    --comment-border: #ffd966;
    --comment-btn-bg: #f0f0f0;
    
    --placeholder-color: #adb5bd;
    
    /* 间距 */
    --toolbar-padding: 10px;
    --button-size: 36px;
    --editor-padding: 20px;
}

/* 应用颜色变量到元素 */
.content-editor-wrapper {
    background: var(--editor-bg);
    border-color: var(--editor-border);
}

.content-editor-toolbar {
    background: var(--toolbar-bg);
    border-bottom-color: var(--toolbar-border);
}

.content-editor-btn {
    background: var(--button-bg);
    color: var(--button-text);
    border-color: var(--button-border);
}

.content-editor-btn:hover {
    background: var(--button-hover-bg);
}

.content-editor-btn:active {
    background: var(--button-active-bg);
}

.content-editor-content,
.content-editor-editable {
    color: var(--editor-text);
}

[data-placeholder]:empty:before {
    color: var(--placeholder-color);
}

/* 评论相关样式 */
[data-block-id].has-comment {
    background: var(--comment-bg);
    border-left: 3px solid var(--comment-border);
    padding-left: 8px;
}

.block-comment-btn {
    background: var(--comment-btn-bg);
    border-color: var(--editor-border);
}

.block-comment-btn:hover {
    background: var(--button-hover-bg);
}

/* 自动保存指示器 */
.autosave-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 1000;
}

.autosave-indicator.visible {
    opacity: 1;
}

.autosave-indicator.saving {
    background: #3a6ff2;
}

.autosave-indicator.saved {
    background: #28a745;
}

.autosave-indicator.error {
    background: #dc3545;
}