@import (reference) url('../Icon.less');
@import (reference) url('../Text.less');
@import (reference) url('../Label.less');

.ProseMirror {
  --ProseMirror-numLines: 10;

  background: transparent;
  box-sizing: border-box;
  font-variant-ligatures: none;
  min-height: calc(var(--ProseMirror-numLines) * var(--Text-height) + 22px);
  padding: var(--gap-m);
  position: relative;
  white-space: pre-wrap;
  width: 100%;
  word-wrap: break-word;

  .isPlaceholderContent & {
    font-style: italic;
    opacity: 0.5;
  }

  .is-active {
    background-color: var(--color-dominant2);
  }

  .block {
    display: block;
  }

  pre {
    white-space: pre-wrap;
  }

  li {
    position: relative;
  }

  .ProseMirror-hideselection {
    caret-color: transparent;
  }

  .ProseMirror-collabCursor {
    background-color: var(--color-green3);
    border: var(--borderWidth-thin) solid var(--color-green3);
    position: relative;
    width: 2px;
  }

  .ProseMirror-collabCursor::after {
    background-color: inherit;
    color: var(--color-white);
    content: attr(title);
    font-size: var(--fontSize-xs);
    left: -1px;
    line-height: var(--fontSize-xs);
    padding: calc(var(--gap-xs) - 1px);
    position: absolute;
    top: calc((var(--fontSize-xs) - 12%) * -1);
    white-space: nowrap;
  }

  .dropZone {
    background-color: var(--color-blue3);
    height: 8px;
    position: relative;

    .info {
      .Text.is-xs;

      background-color: var(--color-white);
      border: 2px solid var(--color-blue5);
      box-shadow: var(--shadow-2);
      color: var(--color-gray5);
      cursor: pointer;
      height: 32px;
      left: 50%;
      overflow: hidden;
      padding: var(--gap-xs);
      position: absolute;
      text-overflow: ellipsis;
      top: 50%;
      transform: translate(-50%, -50%);
      white-space: nowrap;
      width: 240px;
      z-index: 1;
    }

    .dropZone-text {
      display: inline-block;

      &::after {
        .Icon;

        color: var(--color-black);
        content: 'open_with';
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  /* Make sure li selections wrap around markers */

  li.ProseMirror-selectednode {
    outline: none;
  }

  .ProseMirror-textblock-dropdown {
    min-width: 3em;
  }

  .ProseMirror-menu {
    line-height: 1;
    margin: 0 -4px;
  }

  .ProseMirror-tooltip .ProseMirror-menu {
    white-space: pre;
    width: fit-content;
  }

  .ProseMirror-menuitem {
    display: inline-block;
    margin-right: 3px;
  }

  .ProseMirror-menuseparator {
    border-right: 1px solid #ddd;
    margin-right: 3px;
  }

  .ProseMirror-menu-dropdown,
  .ProseMirror-menu-dropdown-menu {
    font-size: 90%;
    white-space: nowrap;
  }

  .ProseMirror-menu-dropdown {
    cursor: pointer;
    padding-right: 15px;
    position: relative;
    vertical-align: 1px;
  }

  .ProseMirror-menu-dropdown-wrap {
    display: inline-block;
    padding: 1px 0 1px 4px;
    position: relative;
  }

  .ProseMirror-menu-dropdown::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    content: '';
    opacity: 0.6;
    position: absolute;
    right: 4px;
    top: calc(50% - 2px);
  }

  .ProseMirror-menu-dropdown-menu,
  .ProseMirror-menu-submenu {
    background: var(--color-white);
    border: 1px solid #aaa;
    color: #666;
    padding: 2px;
    position: absolute;
  }

  .ProseMirror-menu-dropdown-menu {
    min-width: 6em;
    z-index: 15;
  }

  .ProseMirror-menu-dropdown-item {
    cursor: pointer;
    padding: 2px 8px 2px 4px;
  }

  .ProseMirror-menu-dropdown-item:hover {
    background: #f2f2f2;
  }

  .ProseMirror-menu-submenu-wrap {
    margin-right: -4px;
    position: relative;
  }

  .ProseMirror-menu-submenu-label::after {
    border-bottom: 4px solid transparent;
    border-left: 4px solid currentColor;
    border-top: 4px solid transparent;
    content: '';
    opacity: 0.6;
    position: absolute;
    right: 4px;
    top: calc(50% - 4px);
  }

  .ProseMirror-menu-submenu {
    display: none;
    left: 100%;
    min-width: 4em;
    top: -3px;
  }

  .ProseMirror-menu-active {
    background: #eee;
    border-radius: 4px;
  }

  .ProseMirror-menu-active {
    background: #eee;
    border-radius: 4px;
  }

  .ProseMirror-menu-disabled {
    opacity: 0.3;
  }

  .ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,
  .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
    display: block;
  }

  .ProseMirror-menubar {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray4);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    box-sizing: border-box;
    color: #666;
    left: 0;
    min-height: 1em;
    overflow: visible;
    padding: 1px 6px;
    position: relative;
    right: 0;
    top: 0;
    z-index: 10;
  }

  .ProseMirror-icon {
    cursor: pointer;
    display: inline-block;
    line-height: 0.8;
    padding: 2px 8px;
    vertical-align: -2px; /* Compensate for padding */
  }

  .ProseMirror-menu-disabled.ProseMirror-icon {
    cursor: default;
  }

  .ProseMirror-icon svg {
    fill: currentColor;
    height: 1em;
  }

  .ProseMirror-icon span {
    vertical-align: text-top;
  }

  /* Add space around the hr to make clicking it easier */

  .ProseMirror-example-setup-style hr {
    border: none;
    margin: 1em 0;
    padding: 2px 10px;
  }

  .ProseMirror-example-setup-style hr::after {
    background-color: var(--color-gray4);
    content: '';
    display: block;
    height: 1px;
    line-height: 2px;
  }

  sup {
    vertical-align: super;
  }

  sub {
    vertical-align: sub;
  }

  ul,
  ol {
    margin: var(--Text-height) 0 var(--Text-height) 30px;
  }

  blockquote {
    border-left: 3px solid #eee;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1em;
  }

  .ProseMirror-example-setup-style img {
    cursor: default;
  }

  .ProseMirror-prompt {
    background: var(--color-white);
    border: 1px solid var(--color-gray4);
    border-radius: 3px;
    box-shadow: -0.5px 2px 5px rgb(0 0 0 / 20%);
    padding: 5px 10px 5px 15px;
    position: fixed;
    z-index: 11;
  }

  .ProseMirror-prompt h5 {
    color: #444;
    font-size: 100%;
    font-weight: normal;
    margin: 0;
  }

  .ProseMirror-prompt input[type='text'],
  .ProseMirror-prompt textarea {
    background: #eee;
    border: none;
    outline: none;
  }

  .ProseMirror-prompt input[type='text'] {
    padding: 0 4px;
  }

  .ProseMirror-prompt-close {
    background: transparent;
    border: none;
    color: #666;
    left: 2px;
    padding: 0;
    position: absolute;
    top: 1px;
  }

  .ProseMirror-prompt-close::after {
    content: 'âœ•';
    font-size: 12px;
  }

  .ProseMirror-invalid {
    background: #ffc;
    border: 1px solid #cc7;
    border-radius: 4px;
    min-width: 10em;
    padding: 5px 10px;
    position: absolute;
  }

  .ProseMirror-prompt-buttons {
    display: none;
    margin-top: 5px;
  }

  #editor,
  .editor {
    background: var(--color-white);
    background-clip: padding-box;
    border: 2px solid rgb(0 0 0 / 20%);
    border-radius: 4px;
    color: var(--color-black);
    margin-bottom: 23px;
    padding: 5px 0;
  }

  b {
    font-weight: bold;
  }

  u {
    text-decoration: underline;
  }

  strike {
    text-decoration: line-through;
  }

  .cms-textAlign-left {
    text-align: left;
  }

  .cms-textAlign-center {
    text-align: center;
  }

  .cms-textAlign-right {
    text-align: right;
  }

  ul {
    list-style-type: disc;
  }

  ul::before {
    content: '';
  }

  /* stylelint-disable selector-type-no-unknown */
  bsp-line,
  bsp-break {
    display: block;
  }
  /* stylelint-enable selector-type-no-unknown */

  .ProseMirror ul::before {
    content: '';
  }

  ul ul {
    list-style-type: circle;
  }

  ul ul ul {
    list-style-type: square;
  }

  ol {
    list-style-type: decimal;
  }

  ol ol {
    list-style-type: lower-alpha;
  }

  .rte2-style-align-center {
    text-align: center;
  }

  .rte2-style-align-right {
    text-align: right;
  }

  .rte2-style-bold {
    font-weight: bold;
  }

  .rte2-style-italic {
    font-style: italic;
  }

  .rte2-style-strikethrough {
    text-decoration: line-through;
  }

  .rte2-style-ins-ai,
  .rte2-style-ins-delete,
  .rte2-style-ins-insert,
  .rte2-style-track-delete,
  .rte2-style-track-insert {
    padding: 0;
  }

  .rte2-style-track-delete,
  .rte2-style-ins-delete,
  .rte2-style-ins-delete bsp-line,
  .rte2-style-ins-delete > .Enhancement,
  .rte2-style-track-delete > .Enhancement {
    background: var(--color-red3);
    color: var(--color-red6);
    text-decoration: line-through;

    &.is-selected {
      filter: brightness(0.9);
    }

    & .ProsemirrorEnhancementMenu {
      display: none;
      pointer-events: none;
    }
  }

  .rte2-style-ins-ai {
    &.is-selected {
      filter: brightness(0.9);
    }
  }

  .rte2-style-track-insert,
  .rte2-style-ins-insert,
  .rte2-style-ins-insert bsp-line,
  .rte2-style-track-insert .Enhancement,
  .rte2-style-ins-insert .Enhancement {
    background: var(--color-green3);

    &.is-selected {
      filter: brightness(0.9);
    }
  }

  .rte2-style-underline {
    text-decoration: underline;
  }

  .cms-custom {
    display: inline;
  }

  .rte2-style-html {
    background-color: var(--color-gray3);
  }

  &.ProseMirror-aiPreviewMode {
    .rte2-style-ins-ai {
      background-color: var(--color-purple3);
    }
  }

  &.ProseMirror-aiInlinePreviewMode {
    .rte2-style-ai-inline-highlight {
      background-color: var(--color-blue1);
    }

    .rte2-style-ai-inline-ins {
      background-color: var(--color-blue3);
    }

    .rte2-style-ai-inline-del {
      text-decoration: line-through;
    }
  }

  &.ProseMirror-previewMode {
    .rte2-style-track-delete,
    .rte2-style-ins-delete {
      display: none;
    }

    .rte2-style-track-insert,
    .rte2-style-ins-insert {
      background-color: transparent;

      .Enhancement {
        background-color: transparent;
      }
    }
  }

  .rte2-style-subscript,
  .rte2-style-superscript {
    font-size: 14px;
  }

  .rte2-style-subscript {
    vertical-align: sub;
  }

  .rte2-style-superscript {
    vertical-align: super;
  }

  .rte2-style-brightspot-core-quote-QuoteRichTextElement {
    position: relative;

    .RichTextEditor-preview {
      &::before {
        .Icon;
        .Icon.is-xl;

        color: var(--color-gray4);
        content: 'format_quote';
        left: 0;
        position: absolute;
        top: 0;
      }
    }
  }

  .rte2-style-comment {
    background: var(--color-gray2);

    &.rte2-style-comment-start {
      padding-left: var(--gap-s);

      &::before {
        .Icon;
        .Icon.is-s;

        content: 'comment';
        margin-right: var(--gap-xs);
      }
    }

    &.rte2-style-comment-end {
      padding-right: var(--gap-s);
    }

    .collapsed {
      display: none;
    }
  }

  /* Make larger than "regular" text */
  .rte2-style-brightspot-core-rte-heading-HeadingThree {
    .Text.is-l;

    font-weight: bold;
  }

  /* Make much larger than "regular" text */
  .rte2-style-brightspot-core-rte-heading-HeadingTwo {
    .Text.is-xl;

    font-weight: bold;
  }

  .rte2-style-brightspot-core-carousel-CarouselRichTextElement,
  .rte2-style-brightspot-core-image-ImageRichTextElement,
  .rte2-style-brightspot-core-module-ModuleRichTextElement,
  .rte2-style-brightspot-core-video-VideoRichTextElement,
  .rte2-style-brightspot-core-playlist-PlaylistRichTextElement,
  .rte2-style-brightspot-media-podcast-PodcastRichTextElement,
  .rte2-style-com-psddev-cms-rte-ExternalContentRichTextElement,
  .rte2-style-brightspot-core-quote-QuoteRichTextElement {
    &::before {
      .Icon;

      margin-right: var(--gap-xs);
    }
  }

  .rte2-style-brightspot-core-carousel-CarouselRichTextElement::before {
    content: 'photo_library';
  }

  .rte2-style-brightspot-core-image-ImageRichTextElement::before {
    content: 'photo';
  }

  .rte2-style-brightspot-core-module-ModuleRichTextElement::before {
    content: 'view_module';
  }

  .rte2-style-brightspot-core-video-VideoRichTextElement::before {
    content: 'ondemand_video';
  }

  .rte2-style-brightspot-core-playlist-PlaylistRichTextElement::before {
    content: 'playlist_play';
  }

  .rte2-style-brightspot-media-podcast-PodcastRichTextElement::before {
    content: 'music_note';
  }

  .rte2-style-brightspot-core-quote-QuoteRichTextElement::before {
    content: 'format_quote';
  }

  .rte2-style-com-psddev-cms-rte-ExternalContentRichTextElement::before {
    content: 'settings_ethernet';
  }

  .rte2-style-brightspot-facebook-rte-FacebookRichTextElement,
  .rte2-style-brightspot-instagram-rte-InstagramRichTextElement,
  .rte2-style-brightspot-twitter-rte-TweetRichTextElement {
    padding-bottom: var(--gap-xs);

    &::before {
      .Label;

      margin-right: var(--gap-xs);
    }
  }

  .rte2-style-brightspot-facebook-rte-FacebookRichTextElement::before {
    content: 'Facebook';
  }

  .rte2-style-brightspot-instagram-rte-InstagramRichTextElement::before {
    content: 'Instagram';
  }

  .rte2-style-brightspot-twitter-rte-TweetRichTextElement::before {
    content: 'Tweet';
  }
}

.ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
}

.ProseMirror-gapcursor::after {
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
  border-top: 1px solid var(--color-black);
  content: '';
  display: block;
  height: 40px;
  position: absolute;
  top: 0;
  width: 20px;
}

@keyframes ProseMirror-cursor-blink {
  to {
    visibility: hidden;
  }
}

.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

.CIG-row:only-child.is-unlabeled[data-field='richText'] {
  width: 100%;
}

.ProseMirror-moveEnhancementOverlay {
  background: rgb(var(--rgb-white) / 50%);
  position: absolute;
  z-index: 8;
}

.ProseMirror-moveEnhancementTarget {
  .Icon.is-s;
  .Text.is-s;

  background: var(--color-dominant5);
  color: var(--color-white);
  cursor: pointer;
  height: var(--lineHeight-m);
  left: 0;
  margin-top: calc(0px - var(--lineHeight-m));
  padding: 0 var(--gap-m);
  position: absolute;
  right: 0;

  &::before {
    .Icon;

    content: 'swap_vert';
    margin-right: var(--gap-xs);
    top: 0;
  }

  &.is-emptyLine,
  &.is-cancel {
    margin-top: 0;
  }

  &.is-last {
    bottom: calc(0px - var(--lineHeight-m) - 1px + var(--gap-m));
  }

  &.is-cancel::before {
    content: 'close';
  }
}
