// Wrapper for inline text editor
.op-ckeditor-element
  min-height: 50px

  &.ck-editor__editable_inline
    padding-left: 2px !important

// Wrapper for full text element
.op-ckeditor--wrapper
  margin-bottom: 2rem

// Ensure same border and min-height for preview
.ck-content,
.ck-editor__preview
  border: 1px solid var(--ck-color-base-border)
  min-height: 100px
  padding: 10px

// Specific overrides for ck contenteditable
.ck-content

  // Code block
  pre
    margin: 10px 0

    code
      display: block

  // Override central position of figure
  figure.table
    margin: 1em 0

  // Don't make image full size
  figure.image
    display: inline-block

.ck .ck-widget.op-ckeditor--code-block
  // Display content as pre
  white-space: pre-wrap
  padding: 10px 5px 0 5px
  border: 1px dashed #eee
  background: #f1f1f1
  cursor: pointer

  .op-ckeditor--code-block-language
    text-align: right
    font-style: italic
    font-size: 0.8rem
    padding: 5px 0

.op-macro-list-button
  > .ck.ck-button
    text-align: left

.ckeditor-type-balloon
  margin-left: 25px

.ck.ck-block-toolbar-button
  transform: translateX( -15px )
  z-index: 1000 !important


// Override fixed position of toolbar
// Otherwise the toolbar will 'disappear' behind the topmenu
.ck.ck-sticky-panel__placeholder
  height: 0 !important

.ck.ck-sticky-panel__content
  position: unset !important

// Mentions autocomplete
.ck-list__item .mention-list-item
  display: block
  max-width: 400px
  @include text-shortener