/* =====================================================
   Vditor × shadcn UI 主题适配
   同时覆盖 classic（亮色）和 dark 两套 Vditor 主题
   ===================================================== */

.vditor {
  /* 编辑区背景 & 文字 */
  --background-color:            var(--background);
  --text-color:                  var(--foreground);

  /* 工具栏 */
  --toolbar-height: 2.5rem;
  --toolbar-background-color:    var(--card);
  --toolbar-icon-color:          var(--muted-foreground);
  --toolbar-icon-hover-color:    var(--foreground);

  /* 面板 / 浮层（链接弹窗等） */
  --panel-background-color:      var(--popover);
  --second-color:                var(--muted-foreground);

  /* 边框 & 输入框 */
  --border-color:                var(--border);
  --input-background-color:      var(--input);

  --code-background-color:       var(--muted);

  --scrollbar-thumb-color:       var(--border);

  border-radius: var(--radius);
  border-color:  var(--border);

  contain: layout style;
  contain-intrinsic-height: auto 160px;
}

.vditor--fullscreen {
  max-height: unset !important;
}

.vditor-sm {
  --editor-padding: 2.4rem;
}

.vditor-md {
  --editor-padding: 4rem;
}

.vditor-lg {
  --editor-padding: 12rem;
}

/* ---------- 亮色主题 ---------- */
.vditor--classic {
  --selected-background-color:   color-mix(in oklch, var(--primary) 15%, transparent);
}

/* ---------- 暗色主题 ---------- */
.vditor--dark {
  --selected-background-color:   color-mix(in oklch, var(--primary) 20%, transparent);

  .vditor-reset:focus-within {
    background-color: color-mix(in oklch, var(--background) 90%, white) !important;
  }
}


/* ---------- 公共微调（两套主题都适用）---------- */

/* 工具栏下边框与背景对齐 */
.vditor-toolbar {
  display: flex;
  flex-wrap: wrap;
  padding-left: var(--editor-padding) !important;
  padding-right: var(--editor-padding) !important;
  border-bottom-color: var(--border) !important;
  background-color: var(--card) !important;
  border-radius: var(--radius) var(--radius) 0 0;

  .vditor-toolbar__item {
    float: none;

    button {
      width: auto;
      padding: 0.5rem;
    }

    svg {
      width: 1rem;
      height: 1rem;
    }
  }
}

/* 编辑内容区 */
.vditor-ir,
.vditor-wysiwyg,
.vditor-sv {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
}

/* 底部状态栏 */
.vditor-info {
  background-color: var(--card) !important;
  border-top-color: var(--border) !important;
  color: var(--muted-foreground) !important;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* 浮层面板（超链接、图片插入等弹窗） */
.vditor-panel {
  background-color: var(--popover) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--popover-foreground) !important;
}

.vditor-panel input,
.vditor-panel textarea {
  background-color: var(--input) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--foreground) !important;
}

/* 工具栏 tooltip */
.vditor-tooltipped::after {
  background-color: var(--popover) !important;
  color: var(--popover-foreground) !important;
  border-radius: var(--radius-sm) !important;
}

/* 内容区域 */
.vditor-reset {
  padding-left: var(--editor-padding) !important;
  padding-right: var(--editor-padding) !important;
}

/* 行内代码块 */
.vditor-reset code:not(.hljs) {
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  border-radius: var(--radius-sm) !important;
}

/* 代码块容器 */
.vditor-reset pre {
  background-color: var(--muted) !important;
  border-radius: var(--radius-md) !important;
}

/* 引用块左边框颜色改用 primary */
.vditor-reset blockquote {
  border-left-color: var(--primary) !important;
  color: var(--muted-foreground) !important;
}

/* 分割线 */
.vditor-reset hr {
  border-color: var(--border) !important;
}

/* 链接颜色 */
.vditor-reset a {
  color: var(--primary) !important;
}

@layer base {
  .vditor-reset ol {
    list-style: decimal;
  }
}

@layer components {
  .vditor-reset {
    @apply shadcn-scroll;
  }
  .vditor-reset pre .hljs {
    @apply shadcn-scroll-horizontal;
  }
}
