.ProseMirrorToolbar {
  @apply sticky top-0 z-[3] flex flex-col rounded-t-lg border-b bg-white transition contain-layout contain-style; /* Performance: using contain limits layout recalc scope */
}

.CIG[data-type$='RichTextBody'] {
  --CIG-padding: 0;
}

.ProseMirrorToolbar {
  --ProseMirrorToolbar-rightControls: 3.75rem;

  &:has(+ .ProseMirror:focus) {
    @apply border-primary-600;
  }

  &:has(.rte2-toolbar-find) {
    --ProseMirrorToolbar-rightControls: 5.75rem;
  }

  > ul {
    --ProseMirror-toolbar-h: calc(theme(spacing.4) + theme(lineHeight.6));

    @apply relative inline-flex h-[var(--ProseMirror-toolbar-h)] w-full flex-wrap items-center gap-y-3 overflow-clip py-2 pr-[calc(var(--ProseMirrorToolbar-rightControls)+var(--ProseMirror-wordCount)+var(--iconSize-xs))] ps-3;

    .rte2-toolbar-submenu-2,
    .rte2-toolbar-separator,
    .ProseMirrorToolbar-action
      > a:where(
        [data-icon],
        .rte2-toolbar-noicon:not([class=' rte2-toolbar-noicon'])
      ) {
      @apply me-1;
    }
  }

  /* Temp placeholder button */
  .overflow-placeholder {
    @apply w-[calc(theme(spacing.1)+theme(lineHeight.6))];
  }

  .rte2-toolbar-separator {
    @apply h-6 w-0.5 bg-gray-100 last:hidden more-contrast:bg-gray-400;
  }

  /* SUBMENUS */
  .rte2-toolbar-submenu-2 {
    &:not([data-rte-toolbar-submenu='Format']) > button {
      @apply btu-button-text-hidden;
    }

    &[data-rte-toolbar-submenu] > button {
      @apply btu-button btu-button-fill-none btu-button-gray btu-button-xs gap-1 p-1 after:btu-icon after:btu-icon-chevron-down after:transition;
    }

    &.disabled > button {
      @apply btu-button-disabled;
    }

    &.is-open > button {
      @apply btu-button-pressed after:-rotate-180;
    }

    &.rte-overflow-btn {
      @apply h-7;
    }

    &.rte-overflow-btn > button {
      @apply z-[2] bg-transparent after:content-none hover:bg-gray-500/10;

      &.is-active {
        @apply bg-primary-500/10;
      }
    }

    /* Make overflowed items inaccessible */
    &.rte-overflow-btn
      ~ li:not(
        [data-rte-style='rte2-toolbar-fullscreen'],
        [data-rte-style='rte2-toolbar-find'],
        [data-rte-style='rte2-toolbar-ai-inline']
      ) {
      @apply pointer-events-none;

      .is-htmlMode & {
        @apply pointer-events-auto;
      }
    }

    &[data-rte-toolbar-submenu='Align'] button {
      @apply w-[3.25rem] before:btu-icon before:btu-icon-align-left;
    }

    &[data-rte-toolbar-submenu='Enhancements'] button {
      @apply w-[3.25rem] before:btu-icon before:btu-icon-image;
    }
  }

  :where(
      [data-rte-toolbar-submenu='Style'],
      [data-rte-toolbar-submenu='Align'],
      [data-rte-toolbar-submenu='Enhancements']
    ) {
    .rte2-toolbar-submenu-2-heading {
      @apply hidden;
    }
  }

  li.rte2-toolbar-submenu-horizontal {
    @apply hidden;
  }

  .CIG-wordCount {
    @apply absolute end-3 top-1.5 z-10 opacity-100;

    /* Override inline styles from JS */
    @apply [--ProseMirror-wordCountSpacingWithOneIcon:52px] [--ProseMirror-wordCountSpacingWithThreeIcons:120px] [--ProseMirror-wordCountSpacingWithTwoIcons:85px];
  }

  /* actions pinned to right of toolbar */
  [data-rte-style='rte2-toolbar-find'] {
    @apply absolute right-11 z-[2] border-e;
  }

  [data-rte-style='rte2-toolbar-ai-inline'] {
    @apply absolute right-2 z-[2] border-e;
  }

  &[data-sidebar-icon-count='2'] [data-rte-style='rte2-toolbar-ai-inline'] {
    @apply right-11;
  }

  &[data-sidebar-icon-count='3'] [data-rte-style='rte2-toolbar-ai-inline'] {
    @apply right-20;
  }

  [data-rte-style='rte2-toolbar-fullscreen'] {
    @apply absolute right-2 z-[2];
  }

  /* track changes */
  > ul > .ProseMirrorToolbar-action > a[data-icon] {
    &.rte2-toolbar-track-changes {
      @apply font-semibold;
    }
  }

  .ProseMirrorToolbar-action > a[data-icon] {
    &.rte2-toolbar-track-changes-accept,
    &.rte2-toolbar-track-changes-accept-all {
      @apply before:btu-icon-circle-check-big;
    }

    &.rte2-toolbar-track-changes-reject,
    &.rte2-toolbar-track-changes-reject-all {
      @apply before:btu-icon-circle-x;
    }
  }
}

/* Track changes submenu */
.ProseMirrorToolbar-horizontalSubmenu > ul {
  @apply flex flex-wrap gap-2 border-t p-1;

  .ProseMirrorToolbar-action {
    @apply last:flex last:before:me-2 last:before:h-7 last:before:w-px last:before:bg-gray-200;
  }

  .ProseMirrorToolbar-action a {
    @apply btu-button-sm;

    &[data-icon='toggle_on'] {
      @apply font-normal before:btu-icon-toggle-right;
    }
  }
}

.is-htmlMode .ProseMirrorToolbar {
  ul {
    @apply after:invisible;
  }

  .ProseMirrorToolbar-horizontalSubmenu,
  .ProseMirrorToolbar-action,
  .rte2-toolbar-separator,
  .rte2-toolbar-submenu-2 {
    @apply hidden;
  }

  [data-rte-style='rte2-toolbar-togglemode'] {
    @apply inline-block;
  }
}

.rte2-toolbar-submenu-2-items.overflow-items {
  @apply py-1;

  .shortcut {
    @apply hidden text-xs text-gray-500 md:blokk;
  }

  .separator {
    @apply before:blokk before:h-px before:w-full before:bg-gray-200;
  }

  /* submenu headings */
  li > ul {
    @apply px-4 pb-1 pt-[13px] text-xs text-gray-500;

    > li {
      @apply -mx-4 first:mt-[9px];
    }
  }

  /* padding around borders */
  .ProseMirrorToolbar-action:has(+ li:not(.ProseMirrorToolbar-action)) {
    @apply pb-1;
  }

  li:has(ul.overflow-submenu) + li.ProseMirrorToolbar-action,
  li.separator + li.ProseMirrorToolbar-action {
    @apply pt-1;
  }

  /* Add a border between items with submenus */
  li:has(> ul.overflow-submenu):not(:has(+ .separator)),
  li:has(+ li ul) {
    @apply border-b;
  }

  .ProseMirrorToolbar-action > a {
    @apply rounded-none;

    &.rte2-toolbar-noicon {
      @apply before:content-none;
    }
  }

  .ProseMirrorToolbar-action.disabled {
    @apply pointer-events-none text-gray-300 [&_a]:text-gray-300;
  }
}

/* overflow cover */
.ProseMirrorToolbar > ul {
  @apply after:btu-icon after:btu-icon-ellipsis-vertical after:absolute after:left-1 after:right-0 after:z-[1] after:flex after:h-7 after:items-center after:bg-white after:transition;

  &::after {
    transform: translateX(var(--cover-offset-x, 100%));
  }
}

.ProseMirrorToolbar {
  .rte2-toolbar-submenu-2.rte-overflow-btn {
    /* In RTL, hide overflowed items since the cover is disabled */
    ~ li:not(
        [data-rte-style='rte2-toolbar-fullscreen'],
        [data-rte-style='rte2-toolbar-find'],
        [data-rte-style='rte2-toolbar-ai-inline']
      ) {
      @apply rtl:invisible;

      .is-htmlMode & {
        @apply rtl:visible;
      }
    }

    /* Since overflow cover is hidden now, we have to set button icon */
    > button {
      @apply rtl:before:btu-icon rtl:before:btu-icon-ellipsis-vertical;
    }
  }

  /* Hide overflow cover in RTL */
  > ul::after {
    @apply rtl:hidden;
  }
}

/* Avoids unusually tall action items in dropdown menus  */
/* workaround for BSP-17127 */
.ProseMirrorToolbar-action br {
  @apply hidden;
}
.ProseMirrorToolbar-action > a[data-icon] {
  @apply gap-x-2 before:btu-icon;
}

.ProseMirrorToolbar > ul >,
.ProseMirrorToolbar-horizontalSubmenu {
  .ProseMirrorToolbar-action > a[data-icon] {
    @apply btu-button btu-button-fill-none btu-button-gray btu-button-xs;

    &:not(.rte2-toolbar-track-changes):not(
        [class*='rte2-toolbar-track-changes-']
      ) {
      @apply btu-button-text-hidden;
    }
  }
}

/* OPEN SUBMENUS */
button + .rte2-toolbar-submenu-2-items {
  @apply Dropdown min-w-min [--Page-headerBottom:var(--page-header-h)];

  &.is-opening:not(.is-removing) {
    @apply Dropdown-is-open;
  }

  li.ProseMirrorToolbar-action a {
    @apply Dropdown-item flex justify-start rounded-none;
  }
}

/* individual menu actions */
.ProseMirrorToolbar > ul > .ProseMirrorToolbar-action.active > a[data-icon] {
  @apply btu-button-pressed;
}

.ProseMirrorToolbar-action.disabled > a[data-icon] {
  @apply btu-button-disabled;
}

/* Omit pseudo elements for items with no icon so they don't shift layout. */
.ProseMirrorToolbar-action a[data-icon=''] {
  @apply before:content-none;
}

/* TOOLBAR ICONS */
.ProseMirrorToolbar-action > a[data-icon] {
  &:where(.rte2-toolbar-bold, .rte2-toolbar-italic, .rte2-toolbar-underline) {
    @apply before:font-extrabold;
  }

  &.rte2-toolbar-track-changes-show-final {
    @apply font-medium;
  }

  /* overriding icons that had already been set in tailwind-plugin-icon.ts */
  &[data-icon='photo'] {
    @apply before:btu-icon-image;
  }

  &[data-icon='magic_button'] {
    @apply before:btu-icon-sparkle;
  }

  /* highlight AI content icon */
  &[data-icon='wand_stars'] {
    @apply before:btu-icon-wand-sparkles;
  }

  /* Material to Lucide icon mappings from RichTextToolbarStyle */
  &[data-icon='format_bold'] {
    @apply before:btu-icon-bold;
  }

  &[data-icon='format_italic'] {
    @apply before:btu-icon-italic;
  }

  &[data-icon='format_underlined'] {
    @apply before:btu-icon-underline;
  }

  &[data-icon='format_strikethrough'] {
    @apply before:btu-icon-strikethrough;
  }

  &[data-icon='vertical_align_top'] {
    @apply before:btu-icon-superscript;
  }

  &[data-icon='vertical_align_bottom'] {
    @apply before:btu-icon-subscript;
  }

  &[data-icon='link'] {
    @apply before:btu-icon-link-2;
  }

  &[data-icon='code'] {
    @apply before:btu-icon-code;
  }

  &[data-icon='format_list_bulleted'] {
    @apply before:btu-icon-list;
  }

  &[data-icon='format_list_numbered'] {
    @apply before:btu-icon-list-ordered;
  }

  &[data-icon='format_align_left'] {
    @apply before:btu-icon-align-left;
  }

  &[data-icon='format_align_center'] {
    @apply before:btu-icon-align-center;
  }

  &[data-icon='format_align_right'] {
    @apply before:btu-icon-align-right;
  }

  &[data-icon='comment'] {
    @apply before:btu-icon-message-circle-plus;
  }

  /* Material to Lucide icon mappings from RichTextToolbarAction */
  &[data-icon='format_clear'] {
    @apply before:btu-icon-remove-formatting;
  }

  &[data-icon='format_indent_increase'] {
    @apply before:btu-icon-indent-increase;
  }

  &[data-icon='format_indent_decrease'] {
    @apply before:btu-icon-indent-decrease;
  }

  &[data-icon='keyboard'] {
    @apply before:btu-icon-keyboard;
  }

  &[data-icon='border_all'] {
    @apply before:btu-icon-table-2;
  }

  &[data-icon='toggle_off'] {
    @apply before:btu-icon-toggle-left;
  }

  &[data-icon='toggle_on'] {
    @apply before:btu-icon-toggle-right;
  }

  &[data-icon='check_circle'] {
    @apply before:btu-icon-circle-check-big;
  }

  &[data-icon='cancel'] {
    @apply before:btu-icon-circle-x;
  }

  &[data-icon='close'] {
    @apply before:btu-icon-x;
  }

  &[data-icon='comments_disabled'] {
    @apply before:btu-icon-message-circle-x;
  }

  &[data-icon='search'] {
    @apply before:btu-icon-search;
  }

  &[data-icon='fullscreen'] {
    @apply before:btu-icon-maximize-2;
  }

  &[data-icon='undo'] {
    @apply before:btu-icon-undo;
  }

  &[data-icon='redo'] {
    @apply before:btu-icon-redo;
  }

  /* Material to Lucide icon mappings from RichTextElement files */
  &[data-icon='music_note'] {
    @apply before:btu-icon-radio;
  }

  &[data-icon='help'] {
    @apply before:btu-icon-circle-help;
  }

  &[data-icon='chrome_reader_mode'] {
    @apply before:btu-icon-table-properties;
  }

  &[data-icon='textsms'] {
    @apply before:btu-icon-message-circle-more;
  }

  &[data-icon='post_add'] {
    @apply before:btu-icon-clipboard-plus;
  }

  &[data-icon='short_text'] {
    @apply before:btu-icon-text;
  }

  &[data-icon='settings_ethernet'] {
    @apply before:btu-icon-chevrons-left-right-ellipsis;
  }

  &[data-icon='format_quote'] {
    @apply before:btu-icon-quote;
  }

  &[data-icon='playlist_play'] {
    @apply before:btu-icon-list-video;
  }

  &[data-icon='ondemand_video'] {
    @apply before:btu-icon-video;
  }

  &[data-icon='widgets'] {
    @apply before:btu-icon-blocks;
  }

  &[data-icon='photo_library'] {
    @apply before:btu-icon-images;
  }

  /* Additional Material to Lucide icon mappings */
  &[data-icon='assignment'] {
    @apply before:btu-icon-clipboard-check;
  }

  &[data-icon='attachment'] {
    @apply before:btu-icon-file;
  }

  &[data-icon='photo_camera'] {
    @apply before:btu-icon-camera;
  }

  &[data-icon='subject'] {
    @apply before:btu-icon-letter-text;
  }

  &[data-icon='volume_up'] {
    @apply before:btu-icon-volume-2;
  }

  &[data-icon='slideshow'] {
    @apply before:btu-icon-film;
  }

  &[data-icon='insert_photo'] {
    @apply before:btu-icon-file-image;
  }

  &[data-icon='live_tv'] {
    @apply before:btu-icon-tv-minimal-play;
  }

  &[data-icon='theaters'] {
    @apply before:btu-icon-clapperboard;
  }

  &[data-icon='picture'] {
    @apply before:btu-icon-image-up;
  }

  &[data-icon='rate_review'] {
    @apply before:btu-icon-square-pen;
  }

  &[data-icon='import_contacts'] {
    @apply before:btu-icon-book;
  }

  &[data-icon='toc'] {
    @apply before:btu-icon-notebook-tabs;
  }

  &[data-icon='notes'] {
    @apply before:btu-icon-notebook-text;
  }

  &[data-icon='play'] {
    @apply before:btu-icon-square-play;
  }

  &[data-icon='assessment'] {
    @apply before:btu-icon-file-chart-pie;
  }

  &[data-icon='person'] {
    @apply before:btu-icon-user-pen;
  }

  &[data-icon='handshake'] {
    @apply before:btu-icon-handshake;
  }

  &[data-icon='ballot'] {
    @apply before:btu-icon-shield-question;
  }

  &[data-icon='class'] {
    @apply before:btu-icon-book-type;
  }

  &[data-icon='description'] {
    @apply before:btu-icon-file-text;
  }

  &[data-icon='menu_book'] {
    @apply before:btu-icon-book-marked;
  }

  &[data-icon='question_answer'] {
    @apply before:btu-icon-pencil-line;
  }

  &[data-icon='school'] {
    @apply before:btu-icon-badge-info;
  }

  &[data-icon='auto_stories'] {
    @apply before:btu-icon-book;
  }

  &[data-icon='view_compact'] {
    @apply before:btu-icon-layout-panel-top;
  }

  &[data-icon='grid_on'] {
    @apply before:btu-icon-file-spreadsheet;
  }

  &[data-icon='create_new_folder'] {
    @apply before:btu-icon-boxes;
  }

  &[data-icon='feed'] {
    @apply before:btu-icon-scroll-text;
  }

  &[data-icon='local_offer'] {
    @apply before:btu-icon-tag;
  }

  &[data-icon='home'] {
    @apply before:btu-icon-house;
  }

  &[data-icon='slow_motion_video'] {
    @apply before:btu-icon-list-video;
  }
}

.rte2-toolbar-noicon:not([class=' rte2-toolbar-noicon']) {
  @apply btu-button btu-button-fill-none btu-button-gray btu-button-xs;
}

[data-rte-style='com-psddev-indesign-TextStyleRangeRichTextElement'],
[data-rte-style='com-psddev-indesign-TextStyleRangeRichTextElement'],
[data-rte-style='com-psddev-indesign-ReturnCharacterRichTextElement'],
[data-rte-style='com-psddev-indesign-ReturnCharacterRichTextElement'],
[data-rte-style='com-psddev-indesign-UnicodeRichTextElement'] {
  @apply !hidden;
}
