$errorColor: #d23f31 !default;
$blurColor: #2469F6 !default;

$font-family-base: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !default;
$font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !default;

$transition: all .15s ease-in-out !default;

$max-width: 520px !default;

.vditor {
  --border-color: #eee;
  --second-color: #eee;

  --panel-background-color: #fff;
  --panel-shadow: 0 1px 2px rgba(0, 0, 0, .2);

  --toolbar-background-color: #fff;
  --toolbar-icon-color: ##8490A8;
  --toolbar-icon-hover-color: #{$blurColor};
  --toolbar-height: 52px;
  --toolbar-divider-margin-top: 8px;

  --textarea-background-color: #fff;
  --textarea-text-color: #24292e;

  --resize-icon-color: var(--toolbar-icon-color);
  --resize-background-color: var(--toolbar-background-color);
  --resize-hover-icon-color: var(--panel-background-color);
  --resize-hover-background-color: var(--toolbar-icon-hover-color);

  --count-background-color:rgba(27, 31, 35, .05);
  --heading-border-color: #eaecef;
  --blockquote-color: #6a737d;

  --ir-heading-color: #660e7a;
  --ir-title-color: #808080;
  --ir-bi-color: #0033b3;
  --ir-link-color: #008000;
  --ir-bracket-color: #0000ff;
  --ir-paren-color: #008000;

  &--dark {
    --border-color: #141414;
    --second-color: rgba(185, 185, 185, .36);

    --panel-background-color: #24292e;
    --panel-shadow: 0 1px 2px rgba(255, 255, 255, .2);

    --toolbar-background-color: #1d2125;
    --toolbar-icon-color: #b9b9b9;
    --toolbar-icon-hover-color: #fff;

    --textarea-background-color: #2f363d;
    --textarea-text-color: #d1d5da;

    --resize-icon-color: var(--border-color);
    --resize-background-color: var(--second-color);
    --resize-hover-icon-color: var(--toolbar-icon-hover-color);
    --resize-hover-background-color: rgba(185, 185, 185, .86);

    --count-background-color:  #{rgba($blurColor, .36)};
    --heading-border-color: var(--textarea-text-color);
    --blockquote-color: var(--toolbar-icon-color);

    --ir-heading-color: #9876aa;
    --ir-title-color: #808080;
    --ir-bi-color: #cc7832;
    --ir-link-color: #ffc66d;
    --ir-bracket-color: #287bde;
    --ir-paren-color: #6a8759;
  }
}

@import "tooltipped";
@import "panel";
@import "toolbar";
@import "content";
@import "hint";
@import "reset";
@import "wysiwyg";
@import "ir";
@import "sv";
@import "bubble";