.m_editor {
  &__toolbar {
    width        : 100%;
    border-bottom: 1px solid $lightgrey;

    position     : relative;

    background   : $lightgrey;

    padding      : 10px;

    display      : flex;
    flex-wrap    : wrap;

    border-radius: 5px 5px 0 0;

    &--left,
    &--right {
      display    : flex;
      flex-wrap  : wrap;
      align-items: center;
    }

    &--left {
      padding-right: 20px;
      margin-right : 20px;
      border-right : 1px solid rgba(0, 67, 175, 0.1);
    }

    &--view {
      margin-left: auto;
      border-left: 1px solid rgba(0, 67, 175, 0.1);
    }
  }

  .toolbar__linkBox--style {
    margin: 20px 0;

    > div + div {
      margin-top: 10px;
    }

    > div {
      display    : flex;
      align-items: center;

    }
  }

}

.html {
  display: none;
}

.m_editor--html {
  .m_editor__toolbar--right,
  .toolbar__heading,
  [data-style="justifyLeft"],
  [data-style="justifyCenter"],
  [data-style="indent"],
  [data-style="outdent"],
  [data-style="justifyRight"],
  .html ~ svg {
    display     : none;
    margin-right: 0;
  }

  .toolbar__quote,
  .toolbar__style {
    width    : auto;
    min-width: 30px;
    font-size: 12px;
  }

  button[data-style] {
    border : 1px solid $darkblue;
    padding: 0 10px;

    +button[data-style] {
      margin-left: 10px;
    }
  }

  .m_editor__button {
    margin-right: 10px;
  }

  .html {
    display: block;
  }
}