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

:root {
  --ProseMirror-toolbar-h: calc(
    var(--gap-xs) * 2 + var(--Icon-size) + calc(var(--gap-xs) * 2) + 2px
  );
}

/* Temp placeholder button */
.ProseMirrorToolbar .overflow-placeholder {
  width: calc(var(--gap-s) + var(--Icon-size));
}

/* Overflow button */
.ProseMirrorToolbar .rte2-toolbar-submenu-2.rte-overflow-btn {
  z-index: 2;

  > button {
    .IconButton;

    --IconButton-name: '';

    height: calc(var(--gap-s) + var(--Icon-size));
    padding: 0;
    width: calc(var(--gap-s) + var(--Icon-size));

    &::before {
      padding: 0;
    }

    &::after {
      content: none;
    }
  }
}

.rte2-toolbar-submenu-2-items.overflow-items {
  li:not(.separator) {
    a {
      align-items: center;
      display: flex;
      font-size: var(--fontSize-s);
      font-weight: normal;
      gap: var(--gap-m);
      line-height: var(--lineHeight-m);
      padding: var(--gap-s) var(--gap-m);

      /* inset focus ring so it's not clipped by the overflow */
      &:focus-visible {
        box-shadow:
          0 0 2px var(--color-white),
          inset 0 0 0 2px var(--color-dominant5);
      }

      /* keyboard shortcut string */
      .shortcut {
        .Text.is-xs;

        display: none;
        flex: 1 0 max-content;
        text-align: right;
      }
    }
  }

  li.separator {
    display: grid;
    place-items: center;
  }

  li.separator::before {
    background: var(--color-gray3);
    content: '';
    height: 1px;
    width: 100%;
  }

  li.separator:last-child {
    display: none; /* hide when separator is the last item in the list */
  }

  /* Add a border between items with submenus */
  li:has(> ul.overflow-submenu),
  li:has(+ li ul) {
    border-bottom: solid 1px var(--color-gray3);
  }

  /* Remove border from item with submenu when its followed by a separator */
  > li:has(ul):has(+ .separator) {
    border-bottom: none;
  }

  li:not(:has(> ul.overflow-submenu)) {
    cursor: pointer;
  }

  li > ul {
    font-size: var(--fontSize-xs);
    font-weight: 600;
    line-height: var(--lineHeight-s);
    text-transform: uppercase;
  }

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

.overflow-submenu {
  color: var(--color-gray7);
  padding: var(--gap-s) 0 0 var(--gap-m);
  width: 100%;

  > li {
    margin-left: calc(var(--gap-m) * -1);
  }
}

.ProseMirrorToolbar {
  --cover-offset-inline: var(--cover-offset-x);
  --ProseMirror-wordCount: 5em;
  --ProseMirror-wordCountSpacingWithOneIcon: calc(
    var(--gap-s) * 2 + var(--Icon-size)
  );
  --ProseMirror-wordCountSpacingWithTwoIcons: calc(
    var(--gap-s) * 4 + var(--Icon-size) * 2
  );
  --ProseMirror-wordCountSpacingWithThreeIcons: calc(
    var(--gap-s) * 8 + var(--Icon-size) * 2
  );

  background: var(--color-white);
  border-bottom: 1px solid var(--Input-borderColor);
  contain: layout style; /* Performance: limits layout recalc scope */
  display: flex;
  flex-direction: column;
  position: sticky;
  top: calc(var(--lineHeight-s) - 20px);
  z-index: 9;

  .Icon.is-s;
  .Text.is-s;

  @keyframes fadeOut {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @keyframes moveIn {
    to {
      transform: translateX(100%);
    }
  }

  // Magic Numbers - Chosen because these settings looked good to the developer (@teckels)
  @icon-h-spacing: 5;
  @cluster-mh-spacing: @icon-h-spacing;
  @cluster-ph-spacing: @icon-h-spacing;
  @cluster-bar-color: #dddada;

  &-horizontalSubmenu {
    ul {
      border-top: 1px solid var(--Input-borderColor);
      padding: var(--gap-s) 0 var(--gap-s) var(--gap-s);
      width: 100%;

      .ProseMirrorToolbar-action {
        padding: 0 var(--gap-s);

        &:first-child {
          padding-left: 0;
        }

        &:last-child {
          border-right: none;
        }

        .active {
          &:hover {
            background-color: var(--color-iconHoverBackground);
            color: var(--Link-hoverColor);
          }

          background-color: transparent;
          color: var(--color-black);
        }
      }
    }
  }

  [data-rte-style='rte2-toolbar-find'] {
    background-color: var(--color-white);
    position: absolute;
    right: calc(var(--gap-s) * 2 + var(--Icon-size));
    top: var(--gap-s);
    z-index: 2;
  }

  [data-rte-style='rte2-toolbar-ai-inline'] {
    background-color: var(--color-white);
    position: absolute;
    right: var(--gap-s);
    top: var(--gap-s);
    z-index: 2;
  }

  &[data-sidebar-icon-count='2'] [data-rte-style='rte2-toolbar-ai-inline'] {
    right: calc(var(--gap-s) * 2 + var(--Icon-size));
  }

  &[data-sidebar-icon-count='3'] [data-rte-style='rte2-toolbar-ai-inline'] {
    right: calc(var(--gap-s) * 3 + var(--Icon-size) * 2);
  }

  [data-rte-style='rte2-toolbar-fullscreen'] {
    background-color: var(--color-white);
    position: absolute;
    right: var(--gap-s);
    top: var(--gap-s);
    z-index: 2;
  }

  .is-htmlMode & {
    /* hide the overflow cover in html mode */
    ul::after {
      visibility: hidden;
    }

    &-action,
    .rte2-toolbar-separator,
    .rte2-toolbar-submenu-2 {
      display: none;
    }

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

  .Submenu {
    &.has-icon {
      > button,
      > span {
        .Icon;

        color: var(--color-black);
        display: block;
        height: calc(var(--gap-s) + var(--Icon-size));
        line-height: var(--Icon-size);
        overflow: hidden;
        padding: calc(var(--gap-s) / 2);
        position: relative;
        text-decoration: none !important;
        top: 0;
        width: calc(var(--gap-l) + var(--Icon-size));

        &::before {
          padding-bottom: 100px;
        }
      }
    }

    .has-no-text {
      .rte2-toolbar-submenu-2-heading {
        display: none;
      }
    }

    .has-no-icon-no-text {
      .rte2-toolbar-submenu-2-heading-icon {
        padding-right: 0;
      }

      .rte2-toolbar-submenu-2-heading {
        display: none;
      }

      > span::after {
        pointer-events: all;
        right: 2px;
      }
    }
  }

  .ProseMirrorContainer:hover & {
    border-color: var(--Input-focusColor);
  }

  .ProseMirrorContainer:focus-within & {
    border-color: var(--Input-focusColor);
  }

  .clusterStart:not(:first-child) {
    border-left: 1px solid @cluster-bar-color;
    margin-left: ~'@{cluster-mh-spacing}px';
    padding-left: ~'@{cluster-ph-spacing}px';
  }

  > ul {
    display: flex;
    flex-wrap: wrap;
    height: var(--ProseMirror-toolbar-h);
    overflow: clip; /* prevents overflow scrolling */
    padding: var(--gap-s);
    position: relative;
    width: 100%;

    /* overflow cover with pseudo overflow button */
    &::after {
      .Icon;

      align-items: center;
      background: var(--color-white);
      content: 'more_horiz';
      display: grid;
      height: calc(var(--gap-s) + var(--Icon-size));
      inset: 0;
      opacity: 1;
      overflow: hidden;
      position: absolute;
      text-indent: var(--gap-xs); /* center the icon */
      top: var(--gap-s);
      transform: translateX(var(--cover-offset-inline, 100%));
      transition: transform ease var(--time-xs);
      z-index: 1;
    }

    [dir='rtl'] &::after {
      transform: translateX(calc(var(--cover-offset-inline, 100%) * -1));
    }

    &.coverIntro {
      &::after {
        transition-duration: 0ms;
      }
    }

    &.coverOutro {
      &::after {
        animation:
          fadeOut var(--time-xs) ease forwards,
          moveOut 0ms forwards var(--time-xs);
        transition-delay: var(--time-xs);
      }
    }
  }

  > ul > li {
    margin-bottom: var(
      --gap-m
    ); /* unwanted wrapped item UI will not show up with this extra vertical space */
  }

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

  .rte2-toolbar-submenu-horizontal {
    display: none;
  }

  .rte2-toolbar-separator {
    background: var(--color-gray4);
    height: calc(var(--Icon-size) - 2px);
    margin: calc(var(--gap-s) / 2 + 1px) var(--gap-s);
    width: 1px;
  }

  &-action,
  .rte2-toolbar-separator {
    display: inline-block;
    vertical-align: bottom;
  }

  &-action {
    z-index: 1;

    > a {
      color: var(--color-black);
      display: block;
      padding: calc(var(--gap-s) / 2);
      text-decoration: none !important;

      &.active {
        background: var(--color-gray3);
      }

      &.active.rte2-toolbar-track-changes {
        background: transparent;

        &:hover {
          background-color: var(--color-iconHoverBackground);
          color: var(--Link-hoverColor);
        }
      }

      &[data-icon] {
        height: calc(var(--gap-s) + var(--Icon-size));
        overflow: hidden;
        width: calc(var(--gap-s) + var(--Icon-size));

        &::before {
          .Icon;

          content: attr(data-icon);
          top: 0;
        }
      }

      &[data-icon='toggle_off'],
      &.rte2-toolbar-track-ai[data-icon],
      &.rte2-toolbar-track-changes[data-icon],
      &.rte2-toolbar-track-changes-show-final {
        &:hover::before {
          opacity: 1;
        }

        &::before {
          @icon-disabled-state-fade: 0.5;

          opacity: @icon-disabled-state-fade;
        }
      }

      &.active.rte2-toolbar-track-changes[data-icon],
      &.active.rte2-toolbar-track-changes-show-final {
        &::before {
          opacity: 1;
        }
      }

      &.outOfContext {
        text-decoration-line: line-through !important;
      }
    }

    &:hover {
      a {
        background-color: var(--color-iconHoverBackground);
        color: var(--Link-hoverColor);
      }
    }

    &.disabled {
      a {
        @icon-disabled-state-fade: 0.5;

        opacity: @icon-disabled-state-fade;
        pointer-events: none;
      }
    }

    &.disabled:hover {
      a {
        background: transparent;
        color: var(--color-black);
      }
    }
  }

  .rte2-toolbar-noicon,
  .rte2-toolbar-custom {
    display: inline-block;
    margin-top: 1px;
    text-transform: capitalize;
    vertical-align: text-top;
  }

  /** The following are menu items that display both text and an icon **/
  .ProseMirrorToolbar-action > a.rte2-toolbar-track-changes[data-icon],
  .ProseMirrorToolbar-action > a.rte2-toolbar-track-changes-accept[data-icon],
  .ProseMirrorToolbar-action > a.rte2-toolbar-track-changes-reject[data-icon],
  .ProseMirrorToolbar-action
    > a.rte2-toolbar-track-changes-accept-all[data-icon],
  .ProseMirrorToolbar-action
    > a.rte2-toolbar-track-changes-reject-all[data-icon],
  .ProseMirrorToolbar-action
    > a.rte2-toolbar-track-changes-show-final[data-icon] {
    width: auto;

    &::before {
      padding-right: 0;
    }
  }

  [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'] {
    display: none !important;
  }

  // Visually hide the upload button so that drag-n-drop uploading remains functional.
  [data-rte-style='RichTextEditor-upload'] {
    border: 0;
    margin: -1px;
    padding: 0;
  }

  .rte2-toolbar-submenu-2 {
    cursor: pointer;
    display: inline-block;
    position: relative;
    vertical-align: bottom;

    &:hover,
    &.is-open {
      background: var(--color-iconHoverBackground);
      color: var(--Link-hoverColor);
    }

    &.is-open > span::after,
    &.is-open > button::after {
      transform: rotate(-180deg);
    }
  }

  .rte2-toolbar-submenu-2 {
    height: calc(var(--gap-s) + var(--Icon-size));

    .rte-toolbar-submenu-icon {
      display: block;
      line-height: var(--Icon-size);
      position: relative;

      &[data-icon] {
        .Icon;

        overflow: hidden;
        position: relative;
        width: var(--Icon-size);

        &::before {
          content: attr(data-icon);
        }
      }
    }

    &.disabled {
      @icon-disabled-state-fade: 0.5;

      opacity: @icon-disabled-state-fade;
      pointer-events: none;
    }

    &.active {
      background: var(--color-gray3);
    }

    &.active.rte-overflow-btn {
      background: transparent;
    }

    > span,
    > button {
      display: block;
      padding: calc(var(--gap-s) / 2);
      position: relative;
    }

    button[type='button'] {
      color: var(--color-black);
    }

    > span::after,
    > button::after {
      .Icon;

      content: 'arrow_drop_down';
      pointer-events: none;
      right: calc(var(--gap-s) / 2);
      top: calc(50% - var(--Icon-size) / 2);
      transition: transform var(--time-xs);
    }
  }

  [data-rte-toolbar-submenu='Style'] {
    .ProseMirrorToolbar.Submenu.has-no-icon-no-text;
  }

  [data-rte-toolbar-submenu='Align'] {
    .ProseMirrorToolbar.Submenu.has-no-text;
    .ProseMirrorToolbar.Submenu.has-icon;

    > span,
    > button {
      &::before {
        content: 'format_align_left';
      }
    }
  }

  [data-rte-toolbar-submenu='Enhancements'] {
    .ProseMirrorToolbar.Submenu.has-no-text;
    .ProseMirrorToolbar.Submenu.has-icon;

    > span,
    > button {
      &::before {
        content: 'photo';
      }
    }
  }
}

.ProseMirrorToolbar {
  container: rte-toolbar / inline-size;

  > ul {
    padding-right: calc(
      var(--ProseMirror-wordCount) + var(--gap-s) * 4 + var(--Icon-size) * 2
    );
  }

  .CIG-wordCount {
    background-color: var(--color-white);
    bottom: auto;
    line-height: var(--Icon-size);
    opacity: 1;
    padding: calc(var(--gap-s) / 2);
    top: var(--gap-s);
    visibility: hidden;
    z-index: 10;
  }

  /* Zero out the word count space when the container is narrower than 300px */
  @container rte-toolbar (max-width: 299px) {
    > ul {
      --ProseMirror-wordCount: 0px;
    }
  }

  /* Word count will be visible when the container is wider than 300px */
  @container rte-toolbar (min-width: 300px) {
    .CIG-wordCount {
      visibility: visible;
    }
  }
}

@media (@mq-m) {
  .rte2-toolbar-submenu-2-items.overflow-items {
    li:not(.separator) {
      /* show shortcut text on larger viewports */
      a .shortcut {
        display: inline-block;
      }
    }
  }
}

@media (@mq-l) {
  .ProseMirrorToolbar {
    overflow-x: visible;
    overflow-y: visible;
    white-space: normal;

    > ul {
      padding-right: calc(
        var(--ProseMirror-wordCount) + var(--gap-s) * 4 + var(--Icon-size) * 2
      );
    }

    .is-htmlMode & {
      &-action,
      .rte2-toolbar-separator {
        display: none;
      }
    }

    .rte2-toolbar-track-changes-accept {
      &::before {
        content: 'check';
      }
    }

    .rte2-toolbar-track-changes-reject {
      &::before {
        content: 'close';
      }
    }

    .rte2-toolbar-track-changes-show-final {
      &::before {
        content: 'remove_red_eye';
      }
    }
  }
}

// Closed submenus
.rte2-toolbar-submenu-2 > .rte2-toolbar-submenu-2-items {
  display: none;
}

// Open submenus
body > .rte2-toolbar-submenu-2-items {
  --Link-color: var(--color-black);
  --Link-hoverColor: var(--color-black);
  --Link-hoverDecoration: none;

  background: var(--color-white);
  box-shadow: var(--shadow-3);
  max-width: 45vh;
  opacity: 0;
  overflow-y: scroll;
  padding: var(--gap-s) 0;
  position: fixed;
  transform: scaleY(0);
  transform-origin: top;
  transition:
    opacity var(--time-xs) var(--ease-in),
    transform var(--time-s) var(--ease-out);
  z-index: 200000;

  &.is-opening:not(.is-removing) {
    opacity: 1;
    transform: none;
  }

  &[data-tether-rx='r'] {
    right: calc(100vw - var(--Tether-rl) - var(--Tether-rw)) /*rtl:ignore*/;
  }

  &[data-tether-rx='l'] {
    left: var(--Tether-rl) /*rtl:ignore*/;
  }

  &[data-tether-ry='b'] {
    bottom: calc(100vh - var(--Tether-rt));
    max-height: calc(
      var(--Tether-rt) - var(--Page-headerHeight) - var(--gap-s)
    );
    transform-origin: bottom;
  }

  &[data-tether-ry='t'] {
    max-height: calc(
      100vh - var(--Tether-rt) - var(--Tether-rh) - var(--gap-s) * 2
    );
    top: calc(var(--Tether-rt) + var(--Tether-rh));
    transform-origin: top;
  }

  li:not(:has(> ul)) {
    background-color: transparent;
    display: block;
    font-size: inherit;
    padding: 0;
    text-align: left;
    text-transform: none;

    &.ProseMirrorToolbar-action a {
      display: flex;
      height: auto;
      padding: var(--gap-s) var(--gap-m);
      width: 100%;

      &::before {
        margin-right: var(--gap-s);
      }
    }

    &:not(.disabled) {
      &.active {
        a {
          background-color: var(--color-dominant3);
        }
      }

      &.focus,
      &:hover,
      &:focus {
        a {
          background-color: var(--color-dominant1);
          color: var(--Link-color);
        }
      }
    }

    a.active {
      background-color: var(--color-dominant3);
      color: var(--Link-color);
    }
  }

  li:has(> ul) .ProseMirrorToolbar-action a::before {
    margin-right: 0;
  }

  &:hover > li:focus-visible {
    box-shadow: none;
  }

  &:hover > li:not(:hover) {
    background: var(--color-white);

    a {
      background: var(--color-white);
    }
  }
}
