.simplemde
  border: 1px solid $editor-border-color
  margin: 0 0 1rem
  position: relative
  height: rem(200px)
  box-sizing: border-box
  overflow: hidden

.cm-s-simplemde
  border: 0
  min-height: 0
  height: auto
  padding: 0
  position: absolute
  left: 0
  top: 40px
  width: 100%
  bottom: 0
  color: inherit

.simplemde-toolbar
  position: absolute
  left: 0
  top: 0
  width: 100%
  border-radius: 0
  border: 0
  opacity: 0
  background: $toolbar-bg
  transform: translateY(-20px)
  transition: opacity .5s, transform .5s
  transition-timing-function: ease-out-cubic

  &:hover
    opacity: 1

.toolbar--visible .simplemde-toolbar
  opacity: 1
  transform: translateY(0)

.cm-s-simplemde .CodeMirror-scroll
  height: 100%
  min-height: 0
  font-family: $code-font-family
  color: $text-1-color

.simplemde-toolbar:before,
.simplemde-toolbar:after
  display: none

.simplemde-toolbar
  padding: rem(5px)

.simplemde-toolbar i.separator
  border-right: 0

.simplemde-toolbar a
  color: $toolbar-fore !important
  border: 0
  background: none
  border-radius: 0
  font-size: rem($font-size-icon)
  outline: 0

  &:hover
    background: $toolbar-bg-hover
    color: $toolbar-fore-hover !important
    border: 0

  &.active
    background: $toolbar-bg-selected
    color: $toolbar-fore-selected !important
    border: 0

.simplemde-toolbar.disabled-for-preview a:not(.no-disable)
  background: none
  opacity: $toolbar-disabled-opacity

.cm-s-simplemde .CodeMirror-code .cm-comment
  background: none

.simplemde-statusbar
  display: none

.simplemde-preview
  background: #FFF

.no-heading .cm-s-simplemde .CodeMirror-code
  .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4
    font-size: 1em
    line-height: 1.5