// Missing classnames/elements in UI (will make a PR for these changes):
// - Input for title
// - Toolbar icons
// - Different editor states

// - TODO: Aria label for underline is called 'Insert'. Is this a mistake?

@mixin toolbarButton {
  display: flex;
  align-items: center;
  margin: 0 0.25rem;
  line-height: 1;
  padding: 0 !important;
  height: 2.6rem;
  width: 2.6rem !important;
  min-width: 2.6rem !important;
  line-height: 2.6rem !important;
  border-radius: 0.5rem;

  &:focus,
  &:hover {
    background: var(--g-quaternaryLabelColor) !important;
  }
}

@mixin toolbarButtonIcon {
  font-size: var(--g-font-size-1) !important;
  font-weight: normal !important;
  -webkit-font-smoothing: antialiased;
  color: var(--g-secondaryLabelColor);
  vertical-align: bottom;
}

// divider between the toolbar and the editor
@mixin editorDivider {
  content: "";
  background-color: var(--g-separatorColor);
  height: 0.1rem;
  position: absolute;
  left: -0.7rem;
  right: 0;
}

@mixin toolbarDivider {
  position: relative;
  padding-left: 0 !important;
  padding-right: 0 !important;

  &::before {
    content: "";
    background-color: var(--g-separatorColor);
    height: 100%;
    width: 0.1rem;
    margin: 0 0.65rem;
  }
}

.rli-editor {
  overflow: hidden;
  background: var(--g-primary-Background) !important;

  // reset all inline + toolbar background colors
  .tox .tox-edit-area__iframe,
  .tox .tox-toolbar,
  .tox .tox-toolbar__overflow,
  .tox .tox-toolbar__primary,
  .tox-editor-header,
  .tox-editor-header .tox-toolbar__primary,
  .tox .tox-toolbar-overlord,
  .tox.tox-tinymce-aux .tox-toolbar__overflow,
  .tox .tox-statusbar,
  .tox .tox-dialog__header,
  .tox .tox-dialog,
  .tox textarea,
  .tox input,
  .tox .tox-dialog__footer,
  *[style*="background"] {
    background-color: transparent !important;
  }

  // title, toolbar, editor - background color -
  @media (prefers-color-scheme: dark) {
    background-color: #1f1f1f;
  }

  // remove bg color when no note is selected when search returns no results
  > div > div {
    background-color: transparent !important;
  }

  > div > div > div > div > div {
    &:first-child {
      // note title
      .title-input {
        color: var(--g-headerTextColor) !important;
        margin: 0.5rem 1rem 0;
        padding-top: 1.4rem !important;
        font-weight: 700 !important;
        font-size: 2rem !important;
        max-width: calc(100% - 40px);
      }

      // date/timestamp
      .updated-time-label {
        color: var(--g-secondaryLabelColor) !important;
        font-family: var(--s-font-family-system) !important;
        font-size: 1.1rem;
        margin-top: 0.3rem;
        margin-right: 1rem;
      }

      .editor-toolbar {
        // extra icons next to title
        div:nth-child(2) {
          button {
            color: var(--g-secondaryLabelColor);
            margin: 0 0.2rem;
            font-family: var(--s-font-family-system);
            line-height: 1;

            > * {
              color: var(--g-secondaryLabelColor);
            }

            &:hover {
              background: var(--g-quaternaryLabelColor);
            }

            &::before {
              font-size: 1.4rem;
            }
          }

          // hide default icons of the default and themed icons
          a:nth-child(1),
          a:nth-child(2),
          a:nth-child(3),
          a:nth-child(4),
          a[title="Toggle outline"],
          a[title="Toggle sidebar"],
          a[title="Toggle note list"] {
            > * {
              display: none;
            }
          }

          // spellchecker
          a:nth-child(1) {
            font-size: 0;
            overflow: hidden;
            width: 2.6rem;

            i {
              display: block;
              color: var(--g-secondaryLabelColor);
              // only tweak icon position for SF Pro
              margin: var(--s-font-family-icons, 0.2rem 0.2rem 0);
              font-family: var(--s-font-family-system);
              line-height: 1;
              font-size: 1.4rem;
              font-weight: 400;

              &::before {
                @include icon(textformat-abc-dottedunderline);
                text-transform: uppercase;
              }
              &[title]:not([title=""])::before {
                content: attr(title);
                font-family: var(--s-font-family-system-rounded);
                font-size: 1.4rem !important;
                font-weight: 400;
                line-height: 2.6rem;
                letter-spacing: -0.05rem;
                margin-top: 0;
              }
            }
          }
          // set alarm
          a:nth-child(2):before {
            @include icon(alarm);
          }
          // toggle editor layout
          a:nth-child(3) {
            &.disabled {
              display: none;
            }

            &:before {
              @include icon(square-split-2x1);
            }
          }
          // note properties
          a:nth-child(4):before {
            @include icon(info-circle);
          }

          // icons for plugins
          a[title="Toggle outline"]:before {
            @include icon(list-bullet-indent);
          }

          a[title="Toggle sidebar"]:before {
            @include icon(sidebar-left);
          }

          a[title="Toggle note list"]:before {
            @include icon(list-bullet-rectangle);
          }
        }
      }
    }

    // [...] -dropdown
    .tox-tbtn--enabled {
      background-color: var(--g-quaternaryLabelColor);
    }

    // markdown toggle
    :has(.fa-markdown).tox-tbtn {
      @include toolbarButton();

      &::after {
        @include toolbarButtonIcon();
        color: var(--g-secondaryLabelColor);
        width: 2.6rem;
      }

      &.markdown-active::after {
        content: "MD";
        font-family: var(--s-font-family-system-rounded);
        font-size: 1.2rem !important;
        line-height: 2.6rem;
        font-weight: 500 !important;
      }

      &.richText-active::after {
        @include icon(text-below-photo);
      }
    }

    // hide markdown buttons
    :has(.fa-markdown).tox-tbtn {
      * {
        display: none !important;
      }
    }

    // notebook folder when in all notes or tag view
    &:nth-child(2)[style*="padding-top"] {
      padding: 0 !important;

      button {
        min-height: 0;
        height: auto;
        align-items: baseline;
        background: transparent;
        font-size: 1.3rem;
        margin-top: 0.6rem;
        margin-bottom: 0.4rem;
        margin-left: 2rem;
        min-width: 0 !important;
        padding: 0;

        span {
          color: var(--g-textColor);
        }

        .icon-notebooks::before {
          @include icon(folder);
          color: var(--s-accentColor);
          font-family: var(--s-font-family-system);
          font-size: 1.3rem;
          font-weight: 400;
        }
      }
    }

    // divider between split editors
    [style*="border-left: 1px"] {
      border-color: var(--g-gridColor) !important;

      // prevent the divider border from being shown when markdown preview is
      // enabled and the editor is active (no idea why this was implemented in
      // this way)
      [style*="width: 1px; max-width: 1px;"] {
        border-left: none;
      }
    }
  }

  .joplin-tinymce > div,
  .editor-toolbar,
  .tox .tox-toolbar__group,
  .joplin-tinymce .tox .tox-toolbar__primary {
    background-color: transparent !important;
    border: none !important;
  }

  .joplin-tinymce > div:first-child {
    padding-top: 0.4rem !important;
    margin-top: 0.2rem;
  }

  // first few wysiwyg icons (back, forward & open in external editor)
  .joplin-tinymce,
  .editor-toolbar {
    > div:first-child {
      margin-left: -0.6rem;

      > button {
        @include toolbarButton();
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          display: block;
          font-size: 1.4rem;

          &:before {
            @include toolbarButtonIcon();
          }
        }

        // icon: external editor
        &:nth-of-type(3):nth-of-type(3) {
          min-width: 2.6rem !important;
          font-size: 0 !important;

          span {
            margin-right: 0 !important;

            &[title]:not([title=""])::before {
              color: var(--s-accentColor) !important;

              @include icon(arrow-up-right-square-fill);
            }

            &::before {
              @include icon(arrow-up-forward-app);
            }

            &:not(:first-child) {
              display: none;
            }
          }
        }
      }
    }
  }

  // wysiwyg items
  .tox-toolbar__group {
    padding-left: 0;
    padding-right: 0;

    // dividers between wysiwyg groups
    @include toolbarDivider();

    button,
    button[aria-haspopup="true"] {
      @include toolbarButton();

      &:before {
        @include toolbarButtonIcon();
      }
    }
    svg {
      display: none !important;
    }
  }

  // bold, italic, etc.
  .tox-toolbar__group:nth-child(1) {
    button:nth-child(1):before {
      @include icon(bold);
    }
    button:nth-child(2):before {
      @include icon(italic);
    }
    button:nth-child(3):before {
      @include icon(highlighter);
    }
    button:nth-child(4):before {
      @include icon(strikethrough);
    }
  }

  // underline, superscript, subscript, color
  .tox-toolbar__group:nth-child(2) {
    button:nth-child(1):before {
      @include icon(underline);
    }

    button:nth-child(2):before {
      @include icon(textformat-superscript);
    }
    button:nth-child(3):before {
      @include icon(textformat-subscript);
    }
    div:nth-of-type(1) {
      background: transparent !important;
      margin: 0 !important;
      display: flex;
      align-items: center;
      justify-content: center;

      .tox-tbtn {
        display: none;
      }
      @include toolbarButton();
      &:before {
        @include toolbarButtonIcon();
        @include icon(palette);
      }
      .tox-icon {
        width: 1.4rem !important;
        height: 1.4rem !important;
      }
    }
  }

  // link, inline code, code block, attachment
  .tox-toolbar__group:nth-child(3) {
    button:nth-child(1):before {
      @include icon(link);
    }
    button:nth-child(2):before {
      @include icon(chevron-left-slash-chevron-right);
    }
    button:nth-child(3):before {
      @include icon(curlybraces);
    }
    button:nth-child(4):before {
      @include icon(paperclip);
    }
  }

  // lists
  .tox-toolbar__group:nth-child(4) {
    button:nth-child(1):before {
      @include icon(list-bullet);
    }
    button:nth-child(2):before {
      @include icon(list-number);
    }
    button:nth-child(3):before {
      @include icon(text-badge-checkmark);
    }
  }

  // headings, divider, quote, table, date/time
  .tox-toolbar__group:nth-child(5) {
    button:nth-child(1):before,
    button:nth-child(2):before,
    button:nth-child(3):before {
      font-family: var(--s-font-family-system);
    }

    .tox-tbtn__select-label {
      display: none;
    }

    // h1, h2, h3
    button:nth-child(1):before,
    button:nth-child(2):before,
    button:nth-child(3):before {
      font-family: var(--s-font-family-system-rounded) !important;
    }

    button:nth-child(1):before {
      content: "H1" !important;
    }
    button:nth-child(2):before {
      content: "H2" !important;
    }
    button:nth-child(3):before {
      content: "H3" !important;
    }
  }

  .tox-toolbar__group:nth-child(6) {
    button:nth-child(1):before {
      @include icon(minus);
    }
  }

  .tox-toolbar__group:nth-child(7) {
    button:nth-child(1):before {
      @include icon(text-quote);
    }
  }

  .tox-toolbar__group:nth-child(8) {
    button:nth-child(1):before {
      @include icon(tablecells-badge-ellipsis);
    }

    .tox-tbtn__select-chevron {
      display: none !important;
    }
  }

  .tox-toolbar__group:nth-child(9) {
    button:nth-child(1):before {
      @include icon(clock);
    }
  }

  // add divider between editor icons and text input field
  .tox-editor-header {
    margin-left: 0px;
    padding-left: 9.35rem;
    padding-right: 6rem;

    &:after {
      @include editorDivider();
    }
  }

  // remove 'overflow: hidden' so that the divider is not cut-off
  .tox-tinymce {
    overflow: unset;
  }

  // markdown editor
  > div > div > div > div > div:not(:first-child) {
    .editor-toolbar {
      &:after {
        @include editorDivider();
        bottom: 0;
      }

      div > span {
        @include toolbarDivider();
      }

      button {
        @include toolbarButton();

        span {
          font-size: 0;
        }

        span::before,
        i::before {
          @include toolbarButtonIcon();
          font-weight: inherit !important;
        }

        .icon-bold::before {
          @include icon(bold);
        }
        .icon-italic::before {
          @include icon(italic);
        }
        .icon-link::before {
          @include icon(link);
        }
        .icon-code::before {
          @include icon(chevron-left-slash-chevron-right);
        }
        .icon-attachment::before {
          @include icon(paperclip);
        }
        .icon-bulleted-list::before {
          @include icon(list-bullet);
        }
        .icon-numbered-list::before {
          @include icon(list-number);
        }
        .icon-to-do-list::before {
          @include icon(text-badge-checkmark);
        }
        .icon-heading::before {
          content: "H2";
          font-family: var(--s-font-family-system-rounded);
        }
        .fa-ellipsis-h::before {
          @include icon(minus);
        }
        .icon-add-date::before {
          @include icon(clock);
        }

        .fa-ellipsis-h::before,
        // plugin icons
        .fa-highlighter::before,
        .fa-strikethrough::before,
        .fa-underline::before,
        .fa-superscript::before,
        .fa-subscript::before,
        .fa-hand-point-left::before {
          font-weight: 500 !important;
        }

        .fa-highlighter::before {
          @include icon(highlighter);
        }
        .fa-strikethrough::before {
          @include icon(strikethrough);
        }
        .fa-underline::before {
          @include icon(underline);
        }
        .fa-subscript::before {
          @include icon(textformat-subscript);
        }
        .fa-superscript::before {
          @include icon(textformat-superscript);
        }
        .fa-hand-point-left::before {
          @include icon(link-circle);
        }
      }
    }
  }
}

@mixin dropdownBackground {
  background: var(--g-windowBackgroundColor) !important;
  box-shadow: 0 0 1px rgba(var(--g-shadowColor--rgb), 0.4),
    0 2px 8px rgba(var(--g-shadowColor--rgb), 0.2) !important;
  max-width: none !important;
  padding: 0.5rem !important;
  border-color: transparent !important;
}

@mixin dropdownItemDefault {
  background-color: transparent !important;
  border-radius: 0.4rem;
  color: var(--g-controlTextColor) !important;
  line-height: 1;
  min-height: 2.2rem;
  height: 2.2rem;
  padding: 0 1rem !important;
  font-size: 1.3rem !important;

  * {
    font-size: 1.3rem !important;
  }

  svg {
    fill: var(--g-controlTextColor) !important;
  }
}

@mixin dropdownItem {
  @include dropdownItemDefault();

  &:focus,
  &:hover {
    background: var(--s-accentColor) !important;
    color: #fff !important;

    svg {
      fill: #fff !important;
    }
  }
}

// color menu -- more selectors for extra specificity
.tox .tox-menu.tox-swatches-menu {
  @include dropdownBackground();
}

// table menu
.tox-menu {
  @include dropdownBackground();

  .tox-collection {
    &__group {
      border: none !important;
      padding: 0 !important;

      // dividers
      + * {
        &:before {
          content: "";
          display: block;
          height: 0.1rem;
          margin: 0.5rem 0.8rem !important;
          background-color: var(--g-separatorColor);
        }
      }
    }

    &:focus-within:hover {
      &__item:focus:not(:hover) {
        @include dropdownItemDefault();
      }
    }

    &__item {
      @include dropdownItem();
    }

    &__item-icon {
      display: none !important;
    }

    &__item-label {
      font-size: inherit;
      margin-left: 0 !important;
    }
  }
}
.tox-insert-table-picker {
  color: var(--g-textColor) !important;

  > div {
    background: var(--g-windowBackgroundColor) !important;
    border-color: var(--g-separatorColor) !important;

    &.tox-insert-table-picker__selected {
      background-color: var(--s-accentColor) !important;
    }
  }

  .tox-insert-table-picker__label {
    background: var(--g-windowBackgroundColor) !important;
    color: inherit !important;
  }
}

// bottom tag bar
.tag-bar {
  > div {
    position: relative;
    align-items: baseline !important;
  }

  button {
    padding: 0 !important;
    width: 1.8rem;
    margin-top: 0.2rem;

    &:hover {
      background-color: transparent !important;
    }
  }

  // label
  div > span {
    color: var(--g-secondaryLabelColor) !important;

    // increase click area, so that clicking on the tags also open the modal
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 100%;
    }
  }

  .icon-tags {
    @include toolbarButtonIcon();
    height: 1.8rem;

    &::before {
      font-family: "SF Pro";
      @include icon(tag);
    }
  }

  .tag-list {
    span {
      background-color: var(--g-gridColor) !important;
      border-radius: 0.2rem !important;
      color: var(--g-textColor) !important;
      font-size: 1.1rem !important;
      line-height: 1.4rem !important;
      margin-right: 0.4rem !important;
      padding: 0 0.4rem !important;

      &:last-child {
        margin-right: 0.8rem !important;
      }
    }
    // prevent overlaying content, space between items
    button {
      color: var(--g-secondaryLabelColor) !important;
      display: contents !important;

      &::after {
        content: ", ";
        white-space: pre;
      }

      &:last-child::after {
        padding-right: 1rem;
        content: ""; // remove the comma after the last button
      }
    }
  }
}

// find in note (unused? replaced in the meantime?)
.note-search-bar {
  border-top-color: var(--g-gridColor) !important;
  padding-left: 0.8rem;
  position: relative;
  width: 100%;

  input {
    @include input;
  }

  a {
    padding: 0 !important;

    .fas {
      color: var(--g-secondaryLabelColor) !important;
      font-size: 1.4rem !important;
    }
  }

  .fa-chevron-down::before {
    @include icon(chevron-down);
    font-weight: 500;
  }

  .fa-chevron-up::before {
    @include icon(chevron-up);
    font-weight: 500;
  }

  > div {
    // close button
    > a:first-child {
      position: absolute;
      right: 0.7rem;
      top: 50%;

      .fa-times {
        font-size: 13px;
        font-weight: normal;

        &::after {
          @include icon(xmark);
          color: var(--g-secondaryLabelColor);
          font-weight: 500;
          transform: translateY(-50%) scale(var(--s-icon-size-factor, 1));
        }
      }
    }

    // amount of search results
    > div {
      color: var(--g-secondaryLabelColor) !important;
      padding-left: 1rem;
    }
  }
}

// code block
.tox .tox-textarea-wrap {
  width: 100%;
}

.note-editor-viewer-row > .viewer {
  border-left-color: var(--g-separatorColor);
}
