/* Modified from `extensions\src\platform-scripture-editor\src\_editor-overrides.scss` */

/* Platform.Bible image protocol overrides */
/* stylelint-disable selector-no-qualifying-type */
/* this is required for many overwrites */
/* stylelint-disable selector-class-pattern */

/*  Platform.Bible modifications */

.editor-container {
  max-width: none;
  color: hsl(var(--foreground));
  overflow-y: auto;
  flex-grow: 1;
  margin: 0;

  /*  remove rounded top corners to look better in tabs */
  .toolbar {
    border-bottom: 1px solid hsl(var(--border));
    border-top-left-radius: 0;
    border-top-right-radius: 0;

    background-color: hsl(var(--background));
    color: hsl(var(--color));
  }
}

/*  text selection */
:focus ::selection {
  color: hsl(var(--primary-foreground));
  background-color: hsl(var(--primary));
}

::selection {
  color: hsl(var(--secondary-foreground));
  background-color: hsl(var(--secondary));
}

/*  focus ring */
:focus-visible:not(.editor-input),
.CommentPlugin_CommentInputBox_Editor:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-width: 2px;
  --tw-ring-color: hsl(var(--ring));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
    var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
    var(--tw-ring-color);
  --tw-ring-offset-color: hsl(var(--background));
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/*  buttons */

/*  icon button variant "ghost" */
.Button__root,
button.toolbar-item {
  color: hsl(var(--foreground));

  i,
  i.format {
    opacity: unset;
  }

  &:disabled i,
  &:disabled i.format {
    opacity: 0.5;
  }
}

/*  hover button, input button */
.CommentPlugin_CommentsPanel_SendButton,
.CommentPlugin_CommentsPanel_List_DeleteButton {
  color: hsl(var(--accent-foreground));
}

/*  text button variant "ghost" on popover */
.Modal__closeButton {
  color: hsl(var(--popover-foreground));
  background-color: hsl(var(--popover));
}

/*  toggle button */
.CommentPlugin_ShowCommentsButton.active {
  background-color: hsl(var(--accent));
}

/*  hover and active states */
.toolbar-item:hover:not([disabled]),
.toolbar-item:active:not([disabled]),
.CommentPlugin_ShowCommentsButton.Button__root:hover:not([disabled]),
/* needs to be overwritten */
.CommentPlugin_AddCommentBox_button.Button__root:hover:not([disabled]),
/* fills until the border */
.CommentPlugin_AddCommentBox:hover:not([disabled]),
.CommentPlugin_CommentsPanel_SendButton:hover:not([disabled]),
.CommentPlugin_CommentsPanel_SendButton:active:not([disabled]),
.CommentPlugin_CommentsPanel_List_DeleteButton:hover:not([disabled]),
.CommentPlugin_CommentsPanel_List_DeleteButton:active:not([disabled]),
.Modal__closeButton:hover:not([disabled]) {
  color: hsl(var(--accent-foreground));
  background-color: hsl(var(--accent));
}

.CommentPlugin_CommentsPanel_List_DeleteButton:hover,
.CommentPlugin_CommentsPanel_SendButton:hover i.send,
.CommentPlugin_CommentsPanel_DeletedComment,
.CommentPlugin_CommentsPanel_List_Comment:hover .CommentPlugin_CommentsPanel_List_DeleteButton,
.CommentPlugin_CommentsPanel_List_Thread_QuoteBox:hover
  .CommentPlugin_CommentsPanel_List_DeleteButton {
  filter: unset;
  opacity: unset;
}

/*  toolbar */

.toolbar .toolbar-item .text {
  color: hsl(var(--foreground));
}

.toolbar .divider {
  background-color: hsl(var(--border));
}

.dropdown {
  background-color: hsl(var(--popover));

  .item {
    color: hsl(var(--popover-foreground));
    background-color: hsl(var(--popover));
  }

  .item:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
  }

  .divider {
    background-color: hsl(var(--muted));
  }
}

/*  make the toolbar shrink and grow dynamically */
/*  work around https://github.com/BiblioNexus-Foundation/scripture-editors/issues/126 */
.toolbar-item.block-controls {
  max-width: calc(100% - 140px);

  .icon.block-marker.nb {
    min-width: 20px;
  }

  .chevron-down {
    min-width: 16px;
  }
}

.toolbar .toolbar-item .icon {
  min-width: 20px;
}

/*  _commenting.scss */

.CommentPlugin_CommentInputBox,
.Modal__modal {
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));

  &::before {
    background-color: hsl(var(--popover));
    border-color: transparent transparent hsl(var(--popover)) hsl(var(--popover));
  }

  .Button__root {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
  }

  .Button__root.primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .Button__root:hover:not([disabled]) {
    opacity: 0.8;
  }
}

.typeahead-popover,
.typeahead-popover li {
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
}

.typeahead-popover ul li.selected,
.typeahead-popover li:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.CommentPlugin_CommentInputBox_Editor,
.CommentPlugin_CommentsPanel_Editor {
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border-color: hsl(var(--border));
  caret-color: hsl(var(--foreground));
}

.CommentPlugin_CommentsPanel_Heading,
.CommentPlugin_CommentsPanel_List_Thread {
  border-color: hsl(var(--border));
}

.CommentPlugin_ShowCommentsButton {
  z-index: 10;
  right: 26px;
}

/*  work around https://github.com/BiblioNexus-Foundation/scripture-editors/issues/127 */
.CommentPlugin_AddCommentBox {
  left: unset !important;
  right: 0 !important;

  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
}

.CommentPlugin_AddCommentBox_button {
  color: hsl(var(--popover-foreground));

  &:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
  }
}

.CommentPlugin_CommentsPanel {
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
}

.CommentPlugin_CommentsPanel_SendButton {
  margin: 10px;
  top: 0;
  right: 0;
}

/*  inside the editor */

.editor-inner {
  background: hsl(var(--background));
}

.formatted-font .verse {
  background-color: hsl(var(--secondary));
}

/*  icons */

button {
  i,
  i.chevron-down,
  .icon {
    mask-size: contain;
    mask-position: center;
    background-color: currentColor;
  }
}

i.add-comment {
  /*  could be replaced with lucid icon message-square-text */
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/chat-left-text.svg");
  background-image: none;
}

i.comments {
  /*  could be replaced with lucid icon messages-square */
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/comments.svg");
  background-image: none;
}

i.send {
  /*  could be replaced with lucid icon send */
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/send.svg");
  background-image: none;
}

.CommentPlugin_CommentsPanel_List_DeleteButton i.delete {
  /*  could be replaced with lucid icon trash-2 */
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/trash3.svg");
  background-image: none;
  /*  linting does not like a duplicate rule, therefore putting it in here. */
  /*  overwriting requires this exact selector (or a more specific one) */
  left: 8px;
  top: 8px;
}

/*  _editor.scss */

.link-editor div.link-edit {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/pencil-fill.svg");
  background-image: none;
}

i.undo {
  /*  could be replaced with lucid icon rotate-ccw */
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/arrow-counterclockwise.svg");
  background-image: none;
}

i.redo {
  /*  could be replaced with lucid icon rotate-cw */
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/arrow-clockwise.svg");
  background-image: none;
}

.icon.m,
.icon.nb,
.icon.p,
.icon.pi,
.icon.paragraph {
  /*  could be replaced with lucid icon text */
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/text-paragraph.svg");
  background-image: none;
}

.icon.ms,
.icon.ms1,
.icon.r,
.icon.s,
.icon.large-heading,
.icon.h1 {
  /*  could be replaced with lucid icon heading-1 */
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/type-h1.svg");
  background-image: none;
}

.icon.ms2,
.icon.small-heading,
.icon.h2 {
  /*  could be replaced with lucid icon heading-2 */
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/type-h2.svg");
  background-image: none;
}

.icon.ms3,
.icon.h3 {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/type-h3.svg");
  background-image: none;
}

.icon.mt,
.icon.mt1,
.icon.square-1 {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/1-square.svg");
  background-image: none;
}

.icon.mt2,
.icon.square-2 {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/2-square.svg");
  background-image: none;
}

.icon.mt3,
.icon.square-3 {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/3-square.svg");
  background-image: none;
}

.icon.mt4,
.icon.square-4 {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/4-square.svg");
  background-image: none;
}

.icon.cl,
.icon.bookmark {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/bookmark.svg");
  background-image: none;
}

.icon.ide,
.icon.h,
.icon.h1,
.icon.h2,
.icon.h3,
.icon.toc1,
.icon.toc2,
.icon.toc3,
.icon.file-earmark {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/file-earmark.svg");
  background-image: none;
}

.icon.bullet-list,
.icon.ul {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/list-ul.svg");
  background-image: none;
}

.icon.numbered-list,
.icon.ol {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/list-ol.svg");
  background-image: none;
}

.icon.b,
.icon.q1,
.icon.q2,
.icon.quote {
  /*  could be replaced with lucid icon message-square-quote */
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/chat-square-quote.svg");
  background-image: none;
}

.icon.ban {
  /*  could be replaced with lucid icon lucide-ban */
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/ban.svg");
  background-image: none;
}

.icon.code {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/code.svg");
  background-image: none;
}

i.bold {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/type-bold.svg");
  background-image: none;
}

i.italic {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/type-italic.svg");
  background-image: none;
}

i.underline {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/type-underline.svg");
  background-image: none;
}

i.strikethrough {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/type-strikethrough.svg");
  background-image: none;
}

i.code {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/code.svg");
  background-image: none;
}

i.link {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/link.svg");
  background-image: none;
}

i.left-align {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/text-left.svg");
  background-image: none;
}

i.center-align {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/text-center.svg");
  background-image: none;
}

i.right-align {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/text-right.svg");
  background-image: none;
}

i.justify-align {
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/justify.svg");
  background-image: none;
}

i.chevron-down {
  /*  could be replaced with lucid icon chevron-down */
  mask-image: url("../../../../../../extensions/src/platform-scripture-editor/assets/images/icons/chevron-down.svg");
  background-image: none;
}
