@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use 'mixins/flex' as *;

$font-family: helvetica, arial, 'PingFang', 'Microsoft YaHei',
  'Hiragino Sans GB', 'Microsoft JhengHei', sans-serif;

$lt-md-text-color: #252b3a;
$lt-md-dividing-line: #f2f2f3;

@include b(md) {
  &-view {
    font-size: 14px;

    p {
      word-wrap: break-word;
      margin: 0 0 10px;
      padding: 0;
    }

    ul {
      list-style-type: disc;
      padding-left: 16px;
    }

    ol {
      list-style-type: decimal;
      padding-left: 24px;
    }

    h1 {
      position: relative;
      color: $lt-md-text-color;
      font-weight: bold;
      font-size: 28px;
    }

    table {
      margin-bottom: 10px;
      border-collapse: collapse;
      display: table;
    }

    td,
    th {
      padding: 5px 10px;
      border: 1px solid $lt-md-dividing-line;
      background-color: var(--bg-color-fff);
    }

    caption {
      border: 1px dashed #d7d8da;
      border-bottom: 0;
      padding: 3px;
      text-align: center;
    }

    th {
      border-top: 1px solid $lt-md-dividing-line;
      background-color: #f6f6f8;
    }

    .ue-table-interlace-color-single {
      background-color: var(--bg-color-fff);
    }

    .ue-table-interlace-color-double {
      background-color: #f2f5fc;
    }

    td p {
      margin: 0;
      padding: 0;
    }

    code {
      color: #c7254e;
    }

    pre,
    pre code {
      color: $lt-md-text-color;
      background-color: #f5f5f5;
      padding: 0.5em;
      font-size: 12px;

      &.hljs {
        background-color: #f5f5f5;
      }
    }

    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      line-height: 1.1;
    }

    blockquote {
      padding: 0 8px;
      margin: 0;
      color: #575d6c;
      border-left: 5px solid $lt-md-dividing-line;
    }

    a {
      color: #526ecc;
      text-decoration: underline;
      cursor: pointer;

      &:hover {
        color: #526ecc;
      }
    }

    img {
      max-width: 100%;
    }

    input[type='checkbox'] {
      vertical-align: middle;
    }

    .hljs {
      display: block;
      overflow-x: auto;
      padding: 0.5em;
      color: $lt-md-text-color;
    }

    .hljs-comment,
    .hljs-quote {
      color: #999988;
      font-style: italic;
    }

    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-subst {
      color: $lt-md-text-color;
      font-weight: bold;
    }

    .hljs-number,
    .hljs-literal,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-tag .hljs-attr {
      color: #fa9841;
    }

    .hljs-string,
    .hljs-doctag {
      color: #f66f6a;
    }

    .hljs-title,
    .hljs-section,
    .hljs-selector-id {
      color: #f66f6a;
      font-weight: bold;
    }

    .hljs-subst {
      font-weight: normal;
    }

    .hljs-type,
    .hljs-class .hljs-title {
      font-weight: bold;
      color: #445588;
    }

    .hljs-tag,
    .hljs-name,
    .hljs-attribute {
      color: #000080;
      font-weight: normal;
    }

    .hljs-symbol,
    .hljs-bullet {
      color: #990073;
    }

    .hljs-built_in,
    .hljs-builtin-name {
      color: #0086b3;
    }

    .hljs-meta {
      color: #999999;
      font-weight: bold;
    }

    .hljs-deletion {
      background: #ffdddd;
    }

    .hljs-addition {
      background: #ddffdd;
    }

    .hljs-emphasis {
      font-style: italic;
    }

    .hljs-strong {
      font-weight: bold;
    }

    &.#{$namespace}-md-view-dark {
      .hljs {
        display: block;
        overflow-x: auto;
        padding: 0.5em;
        color: #abb2bf;
      }

      .hljs-comment,
      .hljs-quote {
        color: #5c6370;
        font-style: italic;
      }

      .hljs-doctag,
      .hljs-keyword,
      .hljs-formula {
        color: #c678dd;
      }

      .hljs-section,
      .hljs-name,
      .hljs-selector-tag,
      .hljs-deletion,
      .hljs-subst {
        color: #e06c75;
      }

      .hljs-literal {
        color: #56b6c2;
      }

      .hljs-string,
      .hljs-regexp,
      .hljs-addition,
      .hljs-attribute,
      .hljs-meta-string {
        color: #98c379;
      }

      .hljs-built_in,
      .hljs-class .hljs-title {
        color: #e6c07b;
      }

      .hljs-attr,
      .hljs-variable,
      .hljs-template-variable,
      .hljs-type,
      .hljs-selector-class,
      .hljs-selector-attr,
      .hljs-selector-pseudo,
      .hljs-number {
        color: #d19a66;
      }

      .hljs-symbol,
      .hljs-bullet,
      .hljs-link,
      .hljs-meta,
      .hljs-selector-id,
      .hljs-title {
        color: #61aeee;
      }

      .hljs-emphasis {
        font-style: italic;
      }

      .hljs-strong {
        font-weight: bold;
      }

      .hljs-link {
        text-decoration: underline;
      }
    }
  }

  &-container {
    display: block;
    height: 100%;
    font-family: $font-family;
    font-size: 14px;
    border: 1px solid $lt-md-dividing-line;
    border-radius: 2px;

    .CodeMirror-lines {
      padding: 20px 0;
    }

    .CodeMirror pre {
      padding: 0 20px;
    }

    .CodeMirror pre.CodeMirror-line,
    .CodeMirror pre.CodeMirror-line-like {
      color: $lt-md-text-color;
      font-family: $font-family;
    }

    .#{$namespace}-md-toolbar-container {
      @include flex-between-center;


      ;
      min-height: 52px;
      padding: 8px 0;
      border-bottom: 1px solid $lt-md-dividing-line;
      background-color: var(--bg-color-fff);
      border-radius: 2px 2px 0 0;
    }

    &.#{$namespace}-md-readonly,
    &.#{$namespace}-md-editonly {
      .#{$namespace}-md-content-container {
        position: relative;
        z-index: 0;
      }

      .#{$namespace}-md-content-container .#{$namespace}-md-editor,
      .#{$namespace}-md-content-container .#{$namespace}-md-preview-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }

    &.#{$namespace}-md-readonly .#{$namespace}-md-content-container .#{$namespace}-md-editor {
      z-index: -1;
    }

    &.#{$namespace}-md-readonly .#{$namespace}-md-toolbar-container {
      opacity: 0.3;
      pointer-events: none;
    }

    &.#{$namespace}-md-readonly .#{$namespace}-md-content-container .#{$namespace}-md-preview-container {
      border-left: none;
    }

    &.#{$namespace}-md-editonly .#{$namespace}-md-content-container .#{$namespace}-md-preview-container {
      z-index: -1;
    }

    .#{$namespace}-md-content-container {
      display: flex;
      height: calc(100% - 52px);
      min-height: 250px;

      .CodeMirror-scroll {
        padding-top: 5px;
      }

      .#{$namespace}-md-editor {
        position: relative;
        width: 50%;
        flex-shrink: 0;

        .#{$namespace}-md-count {
          display: inline-block;
          position: absolute;
          right: 8px;
          bottom: 4px;
          font-size: 12px;
          color: #71757f;
        }
      }

      .#{$namespace}-md-preview-container {
        width: 50%;
        flex-shrink: 0;
        padding: 20px;
        border-left: 1px solid $lt-md-dividing-line;
        border-bottom-right-radius: 2px;
        overflow-y: auto;
        background-color: var(--bg-color-fff);
      }
    }

    .CodeMirror-empty pre.CodeMirror-placeholder.CodeMirror-line-like {
      color: #d7d8da;
    }

    input[type='checkbox']+label {
      margin-left: 6px;
    }
  }

  &-readonly .#{$namespace}-md-toolbar {
    opacity: 0.3;
    pointer-events: none;
  }
}

.#{$namespace}-md-preview-container.#{$namespace}-md-view {
  overflow-y: auto;
}

.#{$namespace}-md-view {
  pre code {
    display: block;
    overflow-x: auto;
    line-height: 1.5;
  }
}

@include b(md-toolbar) {
  @include flex-between-center;

  ;
  min-height: 52px;
  padding: 8px 0;
  border-bottom: 1px solid #f2f2f3;
  background-color: var(--bg-color-fff);
  border-radius: 4px 4px 0 0;

  &-container {
    @include items-center;


    flex-wrap: wrap;
    margin-left: 20px;
  }

  &-span {
    width: 1px;
    height: 22px;
    margin-right: 12px;
    background: $lt-md-dividing-line;
  }

  &-item {
    @include inline-flex-center;


    width: 24px;
    height: 24px;
    margin-right: 12px;
    cursor: pointer;

    svg,
    polygon,
    path {
      fill: #71757f;
    }

    &:hover {
      background-color: #f2f2f3;

      svg,
      polygon,
      path {
        fill: #5e7ce0;
      }
    }
  }

  &-tip-content {
    display: inline-block;
    padding: 4px 16px;
  }
}

@include b(md-dropdown) {
  &-font-size {
    padding: 0;
    margin: 0;

    li {
      width: 80px;
      padding: 4px 8px;
      list-style: none;
      cursor: pointer;

      &:hover {
        background-color: #f2f2f3;
      }
    }
  }

  &-font-color {
    display: inline-flex;
    width: 352px;
  }

  &-color-wrap {
    width: 50%;
    padding-left: 4px;

    p {
      line-height: 38px;
      padding: 0;
      margin: 0;
    }
  }

  &-color-picker {
    display: flex;
    flex-wrap: wrap;
    width: 172px;
    padding: 0;
    margin: 0;

    li {
      display: block;
      width: 20px;
      height: 20px;
      margin: 0 2px 2px;
      padding: 0;
      list-style: none;
      cursor: pointer;

      &:hover {
        border: 2px solid #beccfa;
      }
    }
  }
}

/* BASICS */
.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: black;
  direction: ltr;
}

/* PADDING */

.CodeMirror-lines {
  padding: 4px 0;
  /* Vertical padding around content */
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  padding: 0 4px;
  /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
  background-color: white;
  /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}

.CodeMirror-linenumbers {}

.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}

.CodeMirror-guttermarker {
  color: black;
}

.CodeMirror-guttermarker-subtle {
  color: #999;
}

/* CURSOR */

.CodeMirror-cursor {
  border-left: 1px solid black;
  border-right: none;
  width: 0;
}

/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}

.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0 !important;
  background: #7e7;
}

.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}

.cm-fat-cursor .CodeMirror-line::selection,
.cm-fat-cursor .CodeMirror-line>span::selection,
.cm-fat-cursor .CodeMirror-line>span>span::selection {
  background: transparent;
}

.cm-fat-cursor .CodeMirror-line::-moz-selection,
.cm-fat-cursor .CodeMirror-line>span::-moz-selection,
.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection {
  background: transparent;
}

.cm-fat-cursor {
  caret-color: transparent;
}

@-moz-keyframes blink {
  0% {}

  50% {
    background-color: transparent;
  }

  100% {}
}

@-webkit-keyframes blink {
  0% {}

  50% {
    background-color: transparent;
  }

  100% {}
}

@keyframes blink {
  0% {}

  50% {
    background-color: transparent;
  }

  100% {}
}

/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {}

.cm-tab {
  display: inline-block;
  text-decoration: inherit;
}

.CodeMirror-rulers {
  position: absolute;
  left: 0;
  right: 0;
  top: -50px;
  bottom: 0;
  overflow: hidden;
}

.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  top: 0;
  bottom: 0;
  position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-header {
  color: blue;
}

.cm-s-default .cm-quote {
  color: #090;
}

.cm-negative {
  color: #d44;
}

.cm-positive {
  color: #292;
}

.cm-header,
.cm-strong {
  font-weight: bold;
}

.cm-em {
  font-style: italic;
}

.cm-link {
  text-decoration: underline;
}

.cm-strikethrough {
  text-decoration: line-through;
}

.cm-s-default .cm-keyword {
  color: #708;
}

.cm-s-default .cm-atom {
  color: #219;
}

.cm-s-default .cm-number {
  color: #164;
}

.cm-s-default .cm-def {
  color: #00f;
}

.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}

.cm-s-default .cm-variable-2 {
  color: #05a;
}

.cm-s-default .cm-variable-3,
.cm-s-default .cm-type {
  color: #085;
}

.cm-s-default .cm-comment {
  color: #a50;
}

.cm-s-default .cm-string {
  color: #a11;
}

.cm-s-default .cm-string-2 {
  color: #f50;
}

.cm-s-default .cm-meta {
  color: #555;
}

.cm-s-default .cm-qualifier {
  color: #555;
}

.cm-s-default .cm-builtin {
  color: #30a;
}

.cm-s-default .cm-bracket {
  color: #997;
}

.cm-s-default .cm-tag {
  color: #170;
}

.cm-s-default .cm-attribute {
  color: #00c;
}

.cm-s-default .cm-hr {
  color: #999;
}

.cm-s-default .cm-link {
  color: #00c;
}

.cm-s-default .cm-error {
  color: #f00;
}

.cm-invalidchar {
  color: #f00;
}

.CodeMirror-composing {
  border-bottom: 2px solid;
}

/* Default styles for common addons */

div.CodeMirror span.CodeMirror-matchingbracket {
  color: #0b0;
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
  color: #a22;
}

.CodeMirror-matchingtag {
  background: rgba(255, 150, 0, 0.3);
}

.CodeMirror-activeline-background {
  background: #e8f2ff;
}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white;
}

.CodeMirror-scroll {
  overflow: scroll !important;
  /* Things will break if this is overridden */
  /* 50px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -50px;
  margin-right: -50px;
  padding-bottom: 50px;
  height: 100%;
  outline: none;
  /* Prevent dragging from highlighting the element */
  position: relative;
  z-index: 0;
}

.CodeMirror-sizer {
  position: relative;
  border-right: 50px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar,
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none;
  outline: none;
}

.CodeMirror-vscrollbar {
  right: 0;
  top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.CodeMirror-hscrollbar {
  bottom: 0;
  left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}

.CodeMirror-scrollbar-filler {
  right: 0;
  bottom: 0;
}

.CodeMirror-gutter-filler {
  left: 0;
  bottom: 0;
}

.CodeMirror-gutters {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 100%;
  z-index: 3;
}

.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -50px;
}

.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: none !important;
  border: none !important;
}

.CodeMirror-gutter-background {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
}

.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}

.CodeMirror-gutter-wrapper ::selection {
  background-color: transparent;
}

.CodeMirror-gutter-wrapper ::-moz-selection {
  background-color: transparent;
}

.CodeMirror-lines {
  cursor: text;
  min-height: 1px;
  /* prevents collapsing before first draw */
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  /* Reset some styles that the rest of the page might have set */
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual;
}

.CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  padding: 0.1px;
  /* Force widget margins to stay inside of the container */
}

.CodeMirror-widget {}

.CodeMirror-rtl pre {
  direction: rtl;
}

.CodeMirror-code {
  outline: none;
}

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.CodeMirror-cursor {
  position: absolute;
  pointer-events: none;
}

.CodeMirror-measure pre {
  position: static;
}

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3;
}

div.CodeMirror-dragcursors {
  visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible;
}

.CodeMirror-selected {
  background: #d9d9d9;
}

.CodeMirror-focused .CodeMirror-selected {
  background: #d7d4f0;
}

.CodeMirror-crosshair {
  cursor: crosshair;
}

.CodeMirror-line::selection,
.CodeMirror-line>span::selection,
.CodeMirror-line>span>span::selection {
  background: #d7d4f0;
}

.CodeMirror-line::-moz-selection,
.CodeMirror-line>span::-moz-selection,
.CodeMirror-line>span>span::-moz-selection {
  background: #d7d4f0;
}

.cm-searching {
  background-color: #ffa;
  background-color: rgba(255, 255, 0, 0.4);
}

/* Used to force a border model for a node */
.cm-force-border {
  padding-right: 0.1px;
}

@media print {

  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}

/* See issue #2901 */
.cm-tab-wrap-hack:after {
  content: '';
}

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext {
  background: none;
}