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

.ProseMirror-fullscreen-container {
  background-color: var(--color-white);
  bottom: 0;
  box-sizing: border-box;
  height: 100vh;
  left: 0;
  opacity: 1;
  overflow-y: scroll;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.5s linear;
  visibility: visible;
  width: 100%;
  z-index: 999;

  a[data-icon='open_with'] {
    display: none !important;
  }

  &.hide {
    height: 0;
    opacity: 0;
    transition: all 0.5s linear;
    visibility: hidden;
    width: 0;
  }

  &.is-htmlMode {
    .ProsemirrorWordCount {
      display: none;
    }
  }

  &-header {
    background-color: var(--color-dominant1);
    border-bottom: var(--borderWidth-thick) solid var(--color-dominant5);
    box-sizing: border-box;
    color: var(--color-dominant5);
    display: flex;
    font-size: var(--fontSize-l);
    font-style: italic;
    height: var(--lineHeight-xxl);
    line-height: var(--lineHeight-xxl);
    padding: 0 var(--gap-l);
    position: fixed;
    text-overflow: ellipsis;
    top: 0;
    white-space: nowrap;
    width: 100%;
    z-index: 10;

    .InputWrapper {
      width: 100%;

      input[type='text'] {
        border-bottom-width: 0;
        line-height: normal;
        width: 100%;

        &:read-only {
          pointer-events: none;
        }

        &:hover {
          border-bottom-width: 1px;
        }

        &:focus {
          color: var(--color-black);
          font-style: normal;
        }
      }
    }

    &-aside {
      float: right;
      padding: 0 var(--gap-m);

      .ProseMirrorAvatarWrapper {
        float: left;
        font-style: normal;
        margin: var(--gap-s) var(--gap-s) 0 0;
        position: static;
      }

      .WorkInProgressSaveStatus {
        .Link.is-gray;

        font-size: var(--fontSize-m);
        font-style: normal;

        &[data-deleted='true'] {
          pointer-events: none;
        }
      }
    }
  }

  &-footer {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray3);
    bottom: 0;
    height: var(--lineHeight-xxl);
    position: fixed;
    width: 100%;
    z-index: 10;

    .ProsemirrorWordCount {
      bottom: var(--gap-l);
      right: var(--gap-l);
    }
  }

  .ProseMirrorContainer {
    background-color: var(--color-gray1);
    border: none;
    display: grid;
    grid-template:
      'toolbar'
      'main';
    grid-template-columns: 100%;
    grid-template-rows: min-content auto;
    height: calc(100vh - var(--lineHeight-xxl) * 2);
    top: var(--lineHeight-xxl);

    &:focus-within {
      .ProseMirrorToolbar {
        border-bottom-color: var(--Input-borderColor);
      }
    }

    > .AutoExpand {
      display: none;
    }
  }

  .ProseMirrorToolbar {
    box-shadow: var(--shadow-2);
    grid-area: toolbar;
    position: sticky;
    top: var(--lineHeight-xxl);
    width: 100%;
    z-index: 9;

    [data-rte-style='rte2-toolbar-fullscreen'] {
      [dir='rtl'] & {
        left: 25px;
        right: auto;
      }
    }

    &.is-visible {
      border-bottom-color: var(--Input-borderColor);
    }
  }

  .ProseMirror {
    --ProseMirror-maxWidth: 816px;

    background-color: var(--color-white);
    border-left: var(--borderWidth-thin) solid var(--color-gray3);
    border-right: var(--borderWidth-thin) solid var(--color-gray3);
    box-shadow: none;
    box-sizing: border-box;
    grid-area: main;
    margin: 0 auto;
    overflow: scroll;
    padding: calc(var(--gap-xl) * 2);
    width: 100%;
    z-index: 1;
    .Text.is-xl;

    /* Make larger than surrounding text */
    .rte2-style-brightspot-core-rte-heading-HeadingTwo,
    .rte2-style-brightspot-core-rte-heading-HeadingThree {
      .Text.is-xxl;
    }

    &:not(.ProseMirror-previewMode) {
      .rte2-style-ins-delete:not(.is-active),
      .rte2-style-ins-delete:not(.is-active) .Enhancement {
        background-color: var(--color-red1);
      }

      .rte2-style-ins-insert:not(.is-active),
      .rte2-style-ins-insert:not(.is-active) .Enhancement {
        background-color: var(--color-green1);
      }

      .rte2-style-comment:not(.is-active) {
        background-color: var(--color-gray1);
      }
    }

    .rte2-style-brightspot-core-quote-QuoteRichTextElement {
      font-style: italic;
      padding: 0 var(--iconSize-m);

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

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

  @media (@mq-m) {
    .ProseMirrorContainer {
      grid-template:
        'toolbar'
        'main';
      grid-template-columns: 100%;
      grid-template-rows: min-content auto;
      height: calc(100vh - (var(--lineHeight-xxl) * 2));

      .ProseMirror-comments {
        display: none;
      }
    }

    &.is-comments .ProseMirrorContainer {
      grid-template:
        'toolbar toolbar'
        'main aside';
      grid-template-columns: 70% 30%;
      grid-template-rows: min-content auto;
      height: calc(100vh - (var(--lineHeight-xxl) * 2));

      .ProseMirror-comments {
        display: block;
      }
    }
  }

  @media (@mq-l) {
    &.is-comments .ProseMirrorContainer,
    .ProseMirrorContainer {
      grid-template:
        'toolbar toolbar toolbar'
        '. main aside';
      grid-template-columns: 25% 50% 25%;
      grid-template-rows: min-content auto;
      height: calc(100vh - var(--lineHeight-xxl));

      > .AutoExpand {
        display: block;
      }
    }

    .ProseMirror-comments {
      display: block;
      margin-bottom: var(--lineHeight-xxl);
    }
  }
}

.ProseMirror-fullscreen-container .Mention {
  .Text.is-xl;
}

.ProseMirror-comments {
  border-color: var(--color-gray3);
  border-style: solid;
  border-width: 1px 0 0 1px;
  bottom: var(--lineHeight-xxl);
  display: none;
  grid-area: aside;
  overflow: scroll;
}

.ProseMirror-comment,
.ProseMirror-reply {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray3);
  cursor: pointer;
  padding: var(--gap-m) var(--gap-l);
  position: relative;

  &:last-child {
    border-bottom: 0;
  }
}

.ProseMirror-comment {
  border-left: solid calc(var(--borderWidth-thick) * 3) transparent;
  padding-left: calc(var(--gap-l) - calc(var(--borderWidth-thick) * 3));

  &:not(.is-active) {
    .ProseMirror-commentActions > * {
      color: var(--color-gray3);
      pointer-events: none;
    }
  }

  &.is-del.is-active {
    border-bottom-color: var(--color-black);
    border-left-color: var(--color-red5);
  }

  &.is-ins.is-active {
    border-bottom-color: var(--color-black);
    border-left-color: var(--color-green5);
  }

  &.is-comment.is-active {
    border-bottom-color: var(--color-black);
    border-left-color: var(--color-gray5);
  }
}

.ProseMirror-commentActions {
  .Icon.is-s;

  display: flex;
  position: absolute;
  right: 0;
  top: 0;
}

.ProseMirror-commentAccept {
  .IconButton;

  --IconButton-name: 'check_circle';
}

.ProseMirror-commentReject {
  .IconButton;

  --IconButton-name: 'cancel';
}

.ProseMirror-commentReply {
  .IconButton;

  --IconButton-name: 'reply';
}

.ProseMirror-commentRemove {
  .IconButton;

  --IconButton-name: 'cancel';
}

.ProseMirror-commentUser {
  font-weight: bold;
}

.ProseMirror-commentTime {
  .Text.is-s;

  color: var(--color-gray6);
  margin-bottom: var(--gap-xs);

  &::before {
    background: var(--color-gray5);
    border-radius: 100%;
    content: '';
    display: inline-block;
    height: var(--fontSize-s);
    margin: 0 var(--gap-xs) calc((var(--Text-height) - var(--fontSize-s)) / 2) 0;
    vertical-align: bottom;
    width: var(--fontSize-s);
  }
}

.ProseMirror-comment.is-del .ProseMirror-commentTime::before {
  background: var(--color-red5);
}

.ProseMirror-comment.is-ins .ProseMirror-commentTime::before {
  background: var(--color-green5);
}
