.mce-tinymce.mce-container.mce-fullscreen {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  z-index: 100;
}

.mce-tinymce {
  .mce-panel {
    @include lightDark(background-color, #fff, #333);
  }
  .mce-btn {
    @include lightDark(background-color, #fff, #333);
  }
}

.mce-container-body.mce-flow-layout {
  text-align: center;
}

@include smaller-than($l) {
  .mce-container-body.mce-flow-layout {
    overflow-x: scroll;
    white-space: nowrap;
  }
}

.edit-area.flex > div > .mce-tinymce.mce-container.mce-panel {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  margin: 0 -1px;
  > .mce-container-body {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    > .mce-toolbar-grp {
      flex: 0 1 auto;
    }
    > .mce-edit-area {
      flex: 1 1 auto;
      display: flex !important;
      flex-direction: column;
      align-items: stretch;
      -webkit-overflow-scrolling:touch;
      overflow:auto;
      iframe {
        flex: 1;
        // Force TinyMCE iframe to render on its own layer
        // for much greater performance in Safari
        will-change: transform;
      }
    }
  }
}
.page-content.mce-content-body p {
  line-height: 1.6;
}

.page-content.mce-content-body {
  padding-block-start: 1rem;
  padding-block-end: 1rem;
  outline: none;
  display: block;
}

.page-content.mce-content-body > :last-child {
  margin-bottom: 3rem;
}

// Fix to prevent 'No color' option from not being clickable.
.mce-colorbtn-trans {
  overflow: hidden;
}

// Fix to prevent CodeMirror focus events throwing TinyMCE cursor position.
.mce-content-body .CodeMirrorContainer > .CodeMirror {
  pointer-events: none;
}