.editor-toolbar button {
  font-size: 0.85em;
  color: $beige-dark;
}

.CodeMirror-fullscreen:not(.CodeMirror-sided) {
  padding-top: 30px;
  padding-left: 20vw;
  padding-right: 20vw;
  background: lighten($lightgreen, 4%);
  .CodeMirror-scroll {
    padding: 20px;
    background: $white;
    box-shadow: 0px 15px 40px rgba(0,0,0,0.13);
  }

  @media (max-width: 767px) {
    padding-left: 10vw;
    padding-right: 10vw;
  }
  @media (max-width: 415px) {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

.CodeMirror:not(.CodeMirror-fullscreen) .CodeMirror-scroll {
  max-height: 42vh;
}

.CodeMirror-placeholder {
  opacity: 0.2;
}

.cm-s-easymde {
  .cm-header {
    color: $green;
  }
  .cm-strong, .cm-em {
    color: desaturate(darken($darkorange, 20%), 15%);
  }
  .cm-link, .cm-url {
    color: $darkorange;
  }
  .cm-quote {
    color: $blue;
  }
}

.modal-card-body > form.dimmed {
  opacity: 0.3;
  pointer-events: none;
}

@keyframes pulsate {
  0% {opacity: 0.5;}
  50% {opacity: 1.0;}
  100% {opacity: 0.5;}
}

.modal-foot-status {
  flex-grow: 1;
  color: $white;
  font-style: italic;
  font-weight: bold;
  &.in-progress {
    animation: pulsate 1.2s ease-in-out;
    animation-iteration-count: infinite; 
  }
}