@use 'variables' as *;
@use 'mixin' as *;

@mixin toolbar-button-layout {
  .e-tbar-btn.e-btn {
    min-height: $rte-ui-split-btn-height;
    min-width: $rte-ui-split-btn-height;
    padding: $rte-ui-toolbar-tbar-btn-padding; //4.toolbar tbar-btn padding need to confirm and remove

    &:hover,
    &:active,
    &:focus,
    &.e-active {
      border: $rte-ui-hover-split-btn-border;
      padding: $rte-ui-toolbar-tbar-btn-hover-padding; //4.toolbar tbar-btn padding need to confirm and remove
    }

    .e-icons {
      padding: $rte-ui-toolbar-tbar-btn-icons-padding; //4.toolbar tbar-btn padding need to confirm and remove
    }
  }
}

@mixin toolbar-button-default-border {
  &:not(:hover):not(:focus):not(:active):not(.e-active) {
    border: $rte-ui-split-btn-border;
  }
}

@mixin toolbar-popup-layout {
  background: $rte-ui-popup-bg;

  .e-toolbar-item.e-toolbar-popup {
    min-height: $rte-ui-popup-item-min-height;
  }
}

@include export-module('richtexteditor-ui-layout') {

  .e-richtexteditor-ui {
    display: block;
    position: relative;
    background: $rte-ui-content-bg;

    .e-disabled {
      user-select: none;
      pointer-events: none;
    }

    .tableWrapper {
      overflow-x: auto;
    }

    table {
      border-collapse: collapse;
      table-layout: fixed;
      width: 100%;
      overflow: hidden;
      margin: 12px 0;
    }

    td,
    th {
      vertical-align: top;
      box-sizing: border-box;
      position: relative;
      border: 1px solid #d1d5db;
      padding: 8px 12px;
      min-width: 80px;
      text-align: left;
    }

    th {
      font-weight: 600;
    }

    td p,
    th p {
      margin: 0;
    }

    td:not([data-colwidth]):not(.column-resize-dragging),
    th:not([data-colwidth]):not(.column-resize-dragging) {
      min-width: var(--default-cell-min-width);
    }

    .column-resize-handle {
      position: absolute;
      right: -2px;
      top: 0;
      bottom: 0;
      width: 4px;
      z-index: 20;
      background-color: rgb(170, 221, 255);
      pointer-events: none;
    }

    .resize-cursor {
      cursor: ew-resize;
      cursor: col-resize;
    }

    .selectedCell::after {
      z-index: 2;
      position: absolute;
      content: '';
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(200, 200, 255, .4);
      pointer-events: none;
    }

    .e-rte-ui-table-popup.e-popup.e-popup-open {
      border-radius: $rte-ui-table-popup-border-radius;
      box-shadow: $rte-ui-table-popup-box;
      font-size: $rte-ui-popup-open-font-size;
      font-weight: $rte-ui-popup-open-font-weight;
      min-width: 120px;
      overflow: hidden;
      padding: $rte-ui-table-popup-padding;
      border: $rte-ui-table-popup-border;
    }

    .e-rte-ui-table-popup.e-popup-open .e-insert-table-btn {
      width: $rte-ui-insert-table-btn-width;
    }

    .e-rte-ui-table-popup.e-popup-open .e-rte-ui-table-popup-cell {
      border: $rte-ui-table-span-border;
      display: inline-block;
      height: $rte-ui-table-popup-tablecell-height;
      margin: $rte-ui-table-popup-tablecell-margin;
      overflow: hidden;
      vertical-align: top;
      width: $rte-ui-table-popup-tablecell-width;
    }

    // Editor container styles
    .e-rte-ui-container {
      position: relative;
      display: flex;
      flex-direction: column;
      width: $rte-ui-container-width;
      height: $rte-ui-container-height;
      content: 'light-theme';

      @if $theme-name =='bootstrap-dark' or $theme-name =='material-dark' or $theme-name =='fabric-dark' or $theme-name =='material3-dark' or $theme-name =='fluent2-dark' or $theme-name =='fluent2-highcontrast' or $theme-name =='highcontrast' or $theme-name =='botstrap5-dark' or $theme-name =='tailwind-dark' or $theme-name =='fluentui-dark' or $theme-name =='tailwind3-dark' {
        content: 'dark-theme';
      }

      // Content conatainer styles
      .e-rte-ui-content-container {
        flex-grow: 1;
        overflow: hidden;
        transition: 100ms ease-out;
        width: $rte-ui-content-width;
        font-size: $rte-ui-content-font-size;

        // e-content styles
        .e-content {
          width: $rte-ui-e-content-width;
          display: block;
          float: left;
          background: unset;
          box-sizing: border-box;
          height: $rte-ui-content-height;
          min-height: 100px;
          outline: 0 solid transparent;
          padding: $rte-ui-iframe-content-padding;
          position: relative;
          text-align: inherit;
          z-index: 2;
          font-weight: $rte-ui-content-font-weight;
          line-height: $rte-ui-content-line-height;
          font-size: 1em;
          /* stylelint-disable property-no-vendor-prefix */
          -webkit-overflow-scrolling: touch; //iOS devices scrolling smooth
          // sass-lint:enabled no-vendor-prefixes
          overflow: auto;
          transition: 100ms ease-out;
        }

        // Placeholder styles
        .e-placeholder-enabled::before {
          content: attr(placeholder);
          position: absolute;
          opacity: .54;
          left: 16px;
          top: 16px;
          color: $rte-ui-content-font-color;
          pointer-events: none;
          user-select: none;
          font-size: $rte-ui-content-font-size;
        }

        [dir = 'rtl'].e-placeholder-enabled::before {
          left: auto;
          right: 16px;
          direction: rtl;
          text-align: right;
        }
      }

      .e-rte-ui-content-container {
        z-index: 1;
        position: relative;
      }

      // Toolbar styles
      .e-rte-ui-toolbar-wrapper {
        height: $rte-ui-toolbar-wrapper-container-height;
        z-index: 10;
        white-space: nowrap;
        border-radius: $rte-ui-toolbar-wrapper-border-radius;
        border-top-left-radius: $rte-ui-top-left-border-radius;
        border-top-right-radius: $rte-ui-top-right-border-radius;

        .e-rte-ui-toolbar.e-toolbar {

          @if $skin-name =='bootstrap5' {
            &.e-toolbar .e-hor-nav {
              min-height: $rte-ui-toolbar-expand-icon-min-height;
            }
          }

          // Toolbar items stykes
          .e-toolbar-items {

            .e-hscroll-bar .e-hscroll-content .e-toolbar-item:first-child {
              margin-left: $rte-ui-toolbar-item-first-child-margin-left;
            }

            .e-toolbar-item {
              .e-rte-ui-dropdown-menu {
                .e-rte-ui-dropdown-btn-text {
                  font-weight: normal;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
            }
          }

          .e-tbar-btn {
            @include toolbar-button-default-border();
          }

          .e-toolbar-extended.e-visible {
            display: block;
            visibility: hidden;
          }

          .e-toolbar-pop.e-toolbar-extended {
            margin-left: $rte-ui-toolbar-poup-extended-margin-left;
            position: relative;
            width: $rte-ui-pop-toolbar-extended-width;
            top: 0 !important; /* stylelint-disable-line declaration-no-important */
            left: 0 !important; /* stylelint-disable-line declaration-no-important */
          }

          //toolbar popup min height over riding start
          .e-toolbar-pop:not(.e-toolbar-extended) {
            @include toolbar-popup-layout();
          }

          .e-toolbar-pop.e-toolbar-extended.e-popup-open {
            display: block;
          }

          @if $skin-name =='bootstrap5' {
            &.e-toolbar .e-hor-nav {
              min-height: $rte-ui-toolbar-expand-icon-min-height;
            }
          }

          .e-toolbar-pop:not(.e-toolbar-extended) {
            .e-toolbar-item.e-toolbar-popup:not(.e-overlay) .e-tbar-btn:hover .e-icons {
              @if $theme-name =='bootstrap5.3' {
                color: $rte-ui-hover-icons-color;
              }
            }

            .e-toolbar-item.e-toolbar-popup .e-tbar-btn:not(:hover):not(:focus):not(:active):not(.e-active) {
              @if $theme-name =='bootstrap4' {
                background: $rte-ui-default-btn-bg;
              }
            }
          }

          // e-hor-nov styles
          .e-hor-nav.e-expended-nav {
            height: $rte-ui-expended-nav-min-height; //used toolbar component nav default min-height
            min-height: $rte-ui-expended-nav-min-height; //used toolbar component nav default min-height
          }

          @if $skin-name =='fabric-dark' {
            .e-toolbar .e-hor-nav {
              min-height: 42px;
            }
          }

          .e-colorpicker-wrapper {

            .e-font-name,
            .e-paint-bucket {
              display: block;
              font-family: 'e-icons';
              font-weight: normal;
              line-height: 1;
              text-transform: none;
            }

            .e-split-btn-wrapper {
              .e-split-colorpicker {
                .e-selected-color {
                  background: none;
                  display: block;
                  margin-top: 3px;
                  width: 100%;
                  height: auto;

                  .e-split-preview {
                    height: 3px;
                    bottom: 0;
                    top: unset;
                  }
                }
              }
            }
          }
        }

        .e-toolbar-extended .e-toolbar-item,
        .e-toolbar-pop:not(.e-toolbar-extended) .e-toolbar-item.e-toolbar-popup,
        .e-toolbar-item {
          @include toolbar-button-layout();
        }
      }

      // Floating toolbar
      .e-rte-ui-toolbar-wrapper.e-toolbar-floating-enabled {
        position: sticky;
        top: 0;
        overflow: visible;
      }

      // Bottom toolbar styles
      .e-rte-ui-toolbar-wrapper.e-toolbar-position-bottom {
        order: 999;
        bottom: 0;
      }
    }

    // RTL styles
    .e-rtl {
      .e-rte-ui-toolbar .e-hor-nav {
        border-top-left-radius: $rte-ui-top-left-border-radius;
        border-top-right-radius: $rte-ui-top-right-border-radius;
      }

      &.e-toolbar-expanded {
        &.e-rte-fixed-tb-expand {
          transition: none;
        }
      }
    }

    .e-rte-ui-linkcontent .e-rte-label {
      padding-top: $rte-ui-insert-dialog-label-padding-top;
    }

    .e-dlg-content {
      .e-rte-ui-label label,
      .e-img-content .e-linkheader {
        @if $skin-name =='tailwind3' {
          font-weight: $font-weight-medium;
          color: $rte-ui-content-font-color;
        }
      }
    }

    .e-rte-ui-linkcontent .e-rte-ui-label {
      padding-top: $rte-ui-insert-dialog-label-padding-top;
    }

    .e-rte-ui-linkcontent .e-rte-ui-label:first-child {
      padding-top: $rte-ui-link-label-first-child-padding-top;
    }

    .e-rte-ui-link-dialog {
      .e-rte-ui-field:has(#protocolDropdownSlot) {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .e-rte-ui-protocol-dropdown-slot .e-dropdown-btn {
        min-width: $rte-ui-protocol-dropdown-width;
        height: $rte-ui-protocol-dropdown-height;
        border-top-right-radius: $rte-ui-protocol-dropdown-border-radius-top-right;
        border-bottom-right-radius: $rte-ui-protocol-dropdown-border-radius-bottom-right;
      }
      .e-rte-ui-linkurl {
        flex: 1;
        border-top-left-radius: $rte-ui-protocol-dropdown-border-radius-bottom-right;
        border-bottom-left-radius: $rte-ui-protocol-dropdown-border-radius-bottom-right;
      }
    }
  }

  .e-rte-ui-toolbar .e-remove-link::before {
    content: '\e80c';
  }
  @if $skin-name == 'tailwind' {
    .e-rte-table-popup.e-popup.e-popup-open {
      box-shadow: $rte-ui-table-popup-box;
    }
  }
  .e-rte-ui-insert-table-dialog .e-rte-field {
    padding-top: $rte-ui-insert-dialog-label-padding-top;
  }

  .e-rte-ui-insert-table-dialog .e-rte-field:first-child {
    padding-top: $rte-ui-table-dialog-label-padding-top;
  }

  .e-rte-ui-img-dialog .e-rte-ui-label {
    padding-top: $rte-ui-insert-dialog-label-padding-top;
  }

  .e-rte-ui-img-dialog .e-rte-ui-label:first-child {
    padding-top: $rte-ui-img-label-first-child-padding-top;
  }

  .e-rte-ui-full-screen {
    .e-rte-ui-img-dialog {
      max-height: $rte-ui-img-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-rte-ui-img-dialog.e-dialog.e-device.e-dlg-modal {
    .e-img-uploadwrap.e-droparea {
      min-height: 50px;
      position: relative;

      .e-browsebtn {
        display: block;
        height: $rte-ui-dlg-modal-browse-btn-mobile-height;
        margin: $rte-ui-dlg-modal-browse-btn-margin;
        padding: $rte-ui-dlg-modal-browse-btn-padding;
        position: relative;
        top: 6px;
      }

      .e-upload {
        border: $rte-ui-import-word-upload-border;
        float: none;
      }

      .e-file-select-wrap {
        display: none;
      }
    }
  }

  .e-dialog .e-img-uploadwrap.e-droparea {
    min-height: 50px;
    position: relative;

    .e-rte-ui-upload-text {
      display: inline-block;
      line-height: $rte-ui-dialog-word-upload-text-line-height;
    }

    .e-browsebtn {
      display: block;
      height: $rte-ui-droparea-browsebtn-height;
      margin: $rte-ui-droparea-browsebtn-margin;
      padding: $rte-ui-droparea-browsebtn-padding;
      position: relative;
      top: 6px;
    }
  }

  .e-rte-ui-img-dialog {
    .e-img-uploadwrap.e-droparea {
      .e-file-select-wrap {
        display: none;
      }

      .e-upload {
        border: $rte-ui-media-droparea-upload-border;
        float: none;
      }
    }
  }

  .e-rte-ui-img-dialog .e-linkheader {
    font-size: $rte-ui-insert-dialog-font-size;
    opacity: .87;
    padding-bottom: $rte-ui-insert-dialog-label-padding-bottom;
    padding-top: $rte-ui-insert-dialog-label-padding-top;
  }

  .e-dialog .e-img-uploadwrap .e-droptext {
    border: $rte-ui-drop-text-border;
    border-radius: $rte-ui-upload-drag-border-radius;
    font-size: $rte-ui-drop-text-font-size;
    height: $rte-ui-drop-text-height;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.e-rte-ui-dropdown-popup {

  ul {
    .e-item {

      &.e-h1 {
        font-size: 2em;
        font-weight: bold;
        height: 40px;

        @if $skin-name =='fluent2' {
          line-height: 24px;
        }

        @else {
          line-height: 40px;
        }
      }

      &.e-h2 {
        font-size: 1.5em;
        font-weight: bold;
        height: 40px;

        @if $skin-name =='fluent2' {
          line-height: 24px;
        }

        @else {
          line-height: 40px;
        }
      }

      &.e-h3 {
        font-size: 1.16em;
        font-weight: bold;
      }

      &.e-h4 {
        font-size: 1em;
        font-weight: bold;
      }

      &.e-segoe-ui {
        font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
      }

      &.e-arial {
        font-family: 'Arial', 'Helvetica', sans-serif;
      }

      &.e-courier-new {
        font-family: 'Courier New', 'Courier', monospace;
      }

      &.e-georgia {
        font-family: 'Georgia', 'Times New Roman', 'Times', serif;
      }

      &.e-helvetica {
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
      }

      &.e-impact {
        font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
      }

      &.e-lucida-console {
        font-family: 'Lucida Console', 'Monaco', monospace;
      }

      &.e-tahoma {
        font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
      }

      &.e-times-new-roman {
        font-family: 'Times New Roman', 'Times', serif;
      }

      &.e-trebuchet-ms {
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', sans-serif;
      }

      &.e-verdana {
        font-family: 'Verdana', 'Geneva', 'Tahoma', sans-serif;
      }

      &.e-roboto {
        font-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', sans-serif;
      }
    }
  }

  .e-container {
    .e-custom-palette {
      .e-palette {
        display: grid;
        grid-row-gap: 12px;
        padding: 12px;

        .e-tile {
          border-radius: 50%;
        }

        .e-tile.e-icons.e-custom-tile.e-selected::before {
          content: '\e774';
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          z-index: 10;
        }
  
        .e-tile.e-selected {
          outline: var(--color-sf-primary) .5px solid;
        }
      }
  
      .e-row {
        display: flex;
        gap: 12px;
        justify-content: flex-start;
      }
    }
  }
  .e-rte-ui-dropdown-btn-text-wrapper {
    display: inline-flex;

    .e-rte-ui-dropdown-btn-text {
      // Need to check this
      $font-weight: 300 !default;
      font-weight: $font-weight;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.e-rte-ui-elements.e-slash-command {
  .e-rte-quotes::before {
    content: open-quote;
    font-size: $rte-ui-slash-command-content-font-size;
    line-height: $rte-ui-slash-command-content-line-height;
  }

  .e-rte-paragraph::before {
    content: 'T';
    font-size: $rte-ui-slash-command-para-before-font-size;
  }

  .e-rte-h1::before {
    content: 'H1';
    font-size: $rte-ui-slash-command-h1-before-font-size;
  }

  .e-rte-h2::before {
    content: 'H2';
    font-size: $rte-ui-slash-command-h2-before-font-size;
  }

  .e-rte-h3::before {
    content: 'H3';
    font-size: $rte-ui-slash-command-h3-before-font-size;
  }

  .e-rte-h4::before {
    content: 'H4';
    font-size: $rte-ui-slash-command-h4-before-font-size;
  }

  .e-rte-slash-command-item-text {
    font-size: $rte-ui-slash-command-item-text-font-size;
    display: block;
    line-height: $rte-ui-slash-command-item-text-line-height;
    padding: $rte-ui-slash-command-item-text-padding;
  }

  .e-rte-slash-command-item-description {
    display: block;
    line-height: $rte-ui-slash-command-item-description-line-height;
    font-size: $rte-ui-slash-command-item-description-font-size;
    padding: $rte-ui-slash-command-item-description-padding;
  }

  .e-slash-command-icon {
    display: inline-block;
    width: 50px;
    font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
  }

  .e-rte-slash-command-item-content-description {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: $rte-ui-slash-command-description-gap;
    align-items: center;
  }

  .e-rte-slash-command-item-content-description .e-slash-command-icon {
    padding: $rte-ui-slash-command-icon-padding;
  }

  .e-rte-slash-command-item-content-description .e-rte-slash-command-item-text-column {
    display: flex;
    flex-direction: column;
  }

  .e-rte-slash-command-item-content-description .e-rte-slash-command-item-text,
  .e-rte-slash-command-item-content-text {
    font-weight: $rte-ui-slash-command-content-text-font-weight;
  }

  .e-rte-slash-command-item-content-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 25px;
  }

  .e-rte-slash-command-item-content-text .e-slash-command-icon {
    margin-left: $rte-ui-slash-command-icon-margin-left;
    width: 30px;
  }
}

@mixin tip-pointer-layout {
  .e-rte-ui-tip-pointer {
    position: absolute;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: $rte-ui-tip-pointer-before-after-width;
      height: $rte-ui-tip-pointer-before-after-height;
      pointer-events: none;
    }

    &.e-rte-tip-top {
      &::after,
      &::before {
        bottom: 0;
      }
    }

    &.e-rte-tip-bottom {
      bottom: 0;

      &::before,
      &::after {
        top: 0;
      }
    }

    &.e-rte-tip-center,
    &.e-rte-tip-center::before,
    &.e-rte-tip-center::after {
      left: 50%;
      transform: translateX(-50%);
    }

    &.e-rte-tip-left,
    &.e-rte-tip-left::before,
    &.e-rte-tip-left::after {
      left: 8.5px;
      transform: translateX(-50%);
    }

    &.e-rte-tip-right,
    &.e-rte-tip-right::before,
    &.e-rte-tip-right::after {
      right: 8.5px;
      transform: translateX(50%);
    }

    &.e-rte-tip-leftmiddle,
    &.e-rte-tip-leftmiddle::before,
    &.e-rte-tip-leftmiddle::after {
      left: 25%;
      transform: translateX(-50%);
    }

    &.e-rte-tip-rightmiddle,
    &.e-rte-tip-rightmiddle::before,
    &.e-rte-tip-rightmiddle::after {
      right: 25%;
      transform: translateX(50%);
    }
  }
}

@include export-module('richtexteditor-ui-quick-toolbar-layout') {
  .e-rte-ui-quick-popup {
    border-radius: $rte-ui-quick-popup-border-radius;
    border: $rte-ui-quick-popup-border;

    .e-rte-ui-quick-toolbar.e-rte-ui-toolbar.e-toolbar {
      min-height: $rte-ui-quick-toolbar-min-height;
      min-width: $rte-ui-quick-toolbar-min-width;

      .e-toolbar-item {
        .e-rte-font-colorpicker .e-split-colorpicker.e-icons::before,
        .e-rte-background-colorpicker .e-split-colorpicker.e-icons::before {
          display: block;
          font-family: 'e-icons';
          font-weight: $rte-ui-color-picker-font-weight;
          line-height: $rte-ui-color-picker-line-height;
          text-transform: none;
        }

        .e-split-btn-wrapper {
          .e-split-colorpicker {
            .e-selected-color {
              background: none;
              display: block;
              margin-top: $rte-ui-color-picker-margin-top;
              width: $rte-ui-color-picker-width;
              height: $rte-ui-color-picker-height;

              .e-split-preview {
                height: 3px;
                bottom: 0;
                top: unset;
              }
            }
          }
        }
      }
    }

    .e-rte-ui-quick-toolbar {
      .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
        display: inline-block;
        white-space: normal;
      }

      &.e-remove-white-space {
        .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
          white-space: nowrap;
        }
      }

      .e-toolbar-items:not(.e-tbar-pos) {
        min-height: $rte-ui-quick-toolbar-items-not-tbar-pos-min-height;
        min-width: $rte-ui-quick-toolbar-items-not-tbar-pos-min-width;
        margin: $rte-ui-quick-popup-outer-margin;

        .e-toolbar-item {
          margin: $rte-ui-popup-toolbar-item-margin;
          min-height: $rte-ui-popup-toolbar-item-min-height;
          min-width: $rte-ui-popup-toolbar-item-min-width;
          padding: $rte-ui-quick-popup-inner-padding;
        }

        .e-toolbar-item.e-rte-horizontal-separator,
        .e-toolbar-item.e-separator.e-multirow-separator.e-rte-horizontal-separator {
          display: block;
          height: 1px;
          margin: $rte-ui-quick-toolbar-horizontal-separator-margin;
          min-height: 1px;
        }

        .e-toolbar-item {
          margin: $rte-ui-toolbar-item-frist-last-child-margin;

          &:first-child,
          &:last-child {
            margin: $rte-ui-quick-horizontal-separator-first-margin;
          }
        }
      }
    }

    &.e-hide {
      display: block;
      visibility: hidden;
    }

    @include tip-pointer-layout();
  }
}