@use 'ej2-base/styles/common/mixin' as *;

.e-bigger .e-richtexteditor,
.e-richtexteditor.e-bigger {
  &.e-rte-full-screen {

    iframe {
      height: calc(100% - 56px);
    }

    .e-rte-edit-table {
      max-height: $rte-big-table-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-rte-edit-table-prop-dialog {
      max-height: $rte-big-edit-table-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-rte-link-dialog {
      max-height: $rte-big-link-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }

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

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

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

    .e-rte-img-alt-dialog {
      min-height: $rte-big-img-alt-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }
  }
  .e-dialog.e-rte-dialog-minheight {
    @if $theme-name != 'fluent2-highcontrast' {
      min-height: $rte-big-dialog-min-height;
    }
    @if $theme-name == 'fluent2-highcontrast' {
      min-height: $rte-big-dialog-fluent-min-height;
    }
  }
  .e-rte-content .e-content {
    font-size: $rte-big-content-font-size;
  }
  .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
    margin-top: $rte-big-img-upload-abort-icon-btn-margin-top;
    padding: $rte-big-img-upload-abort-icon-btn-padding;
  }
  .e-rte-dropdown-popup.e-rte-dropdown-items ul {
    max-height: 360px;
    overflow-y: auto;
  }

  .e-dialog .e-img-uploadwrap .e-droptext,
  .e-dialog .e-aud-uploadwrap .e-droptext,
  .e-dialog .e-vid-uploadwrap .e-droptext,
  .e-dialog .e-word-uploadwrap .e-droptext {
    height: $rte-big-drop-text-height;
  }
}

.e-bigger {
  .e-rte-emojipicker-popup.e-popup.e-popup-open {
    // min-width: 120px; //Not affecting the UI after removal
    min-height: $rte-big-emoji-popup-open-min-height;
    min-width: $rte-big-emoji-popup-open-width;

    .e-toolbar .e-toolbar-item .e-tbar-btn {
      border-radius: $rte-big-emojipicker-tbar-btn-border-radius;
      padding: $rte-big-toolbar-tbar-btn-padding;
      @if $skin-name =='material' or $skin-name =='material-dark' {
        padding: $rte-big-toolbar-tbar-btn-small-padding;
      }
      @else {
        padding: $rte-big-toolbar-tbar-btn-large-padding;
      }
      
      &:hover {
        padding: $rte-big-toolbar-tbar-btn-hover-padding;
      }

      &:active {
        padding: $rte-big-toolbar-tbar-btn-active-padding;
      }

      .e-tbar-btn-text {
        @if $skin-name =='fluent2' {
          font-size: $rte-big-emoji-popup-small-font-size;
        }
        @else {
          font-size: $rte-big-emoji-popup-large-font-size;
        }
        padding: $rte-big-emoji-popup-padding;
      }
    }

    .e-rte-emojipicker-btn {
      gap: $rte-big-emoji-btn-gap;
      height: $rte-big-emoji-btn-height;
      padding: $rte-big-emoji-btn-padding;

      .e-rte-emojipicker-group .e-rte-emojipickerbtn-group {
        gap: $rte-big-emoji-btn-group-gap;

        .e-btn.e-control {
          padding: $rte-big-emoji-btn-group-padding;
          // width: 42px; //2. emoji picker dynamic issue
          // height: 42px;//2. emoji picker dynamic issue
          // line-height: 0;//No UI affected so removed
          @if $skin-name =='fluent2' {
            font-size: $rte-big-emoji-btn-group-small-font-size;
          }
          @else {
            font-size: $rte-big-emoji-btn-group-large-font-size;
          }
        }
      }

      .e-rte-emojisearch-btn {
        gap: $rte-big-emoji-search-btn-gap;

        .e-btn.e-control {
          font-size: $rte-big-emoji-picker-group-font-size;
          padding: $rte-big-emoji-picker-group-padding;
          // width: 40px; //2. emoji picker dynamic issue
          // height: 40px; //2. emoji picker dynamic issue
          border: $rte-emoji-grp-btn-border;
          // line-height: 0;//No UI affected so removed
        }
      }

      .e-rte-emojipicker-group .e-rte-emojipicker-name {
        font-weight: $rte-big-emoji-picker-name-font-weight;
        font-size: $rte-big-emoji-picker-name-font-size;
      }
    }
  }
  .e-rte-dropdown-popup {
    ul {
      min-width: 84px;
    }
  }

  .e-rte-edit-table .e-rte-field {
    padding-top: $rte-big-insert-dialog-label-padding-top;
  }
  .e-rte-table-popup.e-popup-open{
    .e-rte-tablecell {
      height: $rte-big-tablecell-height;
      width: $rte-big-tablecell-width;
    }
    .e-rte-table-row {
      height: $rte-big-table-row-height;
    }
  }
  .e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor,
  &.e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor {
    background-size: 700px 190px;
    min-height: 190px;
  }
}

.e-bigger {
  .e-rte-quick-popup.e-rte-elements {
    .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar {
      min-height: $rte-big-quick-toolbar-min-height;
      min-width: $rte-big-quick-toolbar-min-width;
      .e-toolbar-items:not(.e-tbar-pos) {
        min-height: $rte-big-quick-toolbar-items-not-tbar-pos-min-height;
        min-width: $rte-big-quick-toolbar-items-not-tbar-pos-min-width;
        margin: $rte-quick-big-popup-outer-margin;
        .e-toolbar-item {
          margin: $rte-big-quick-toolbar-item-margin;
          min-height: $rte-big-popup-toolbar-item-min-height;
          min-width: $rte-big-popup-toolbar-item-min-width;
          padding: $rte-quick-big-popup-inner-padding;
        }
      }
    }
  }
}

.e-bigger {
  .e-richtexteditor .e-rte-toolbar .e-toolbar-item {
    .e-split-btn-wrapper,
    .e-rte-dropdown-menu {
      min-height: $rte-big-split-btn-height;
    }
  }

  .e-rte-quick-popup {
    .e-rte-tip-pointer {
      &.e-rte-tip-top::before {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        @if $theme-name == 'Material3' {
          border-bottom: 14px solid rgb(244, 242, 247);
        }
        @else if $theme-name == 'Material3-dark' {
          border-bottom: 14px solid rgb(44, 42, 54);
        }
        @else if $theme-name == 'bootstrap5' {
          border-bottom: 14px solid $content-bg-color;
        }
        @else if $theme-name == 'bootstrap5-dark' {
          border-bottom: 14px solid $content-bg-color-alt2;
        }
        @else {
          border-bottom: 14px solid $rte-quick-toolbar-tip-pointer-border;
        }
      }
      &.e-rte-tip-top::after {
        border-left: 9.5px solid transparent;
        border-right: 9.5px solid transparent;
        border-bottom: 13px solid $rte-quick-toolbar-tip-pointer-content;
      }
      &.e-rte-tip-bottom::before {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        @if $theme-name == 'Material3' {
          border-top: 14px solid rgb(244, 242, 247);
        }
        @else if $theme-name == 'Material3-dark' {
          border-top: 14px solid rgb(44, 42, 54);
        }
        @else if $theme-name == 'bootstrap5' {
          border-top: 14px solid $content-bg-color;
        }
        @else if $theme-name == 'bootstrap5-dark' {
          border-top: 14px solid $content-bg-color-alt2;
        }
        @else {
          border-top: 14px solid $rte-quick-toolbar-tip-pointer-border;
        }
      }
      &.e-rte-tip-bottom::after {
        border-left: 9.5px solid transparent;
        border-right: 9.5px solid transparent;
        border-top: 13px solid $rte-quick-toolbar-tip-pointer-content;
      }
    }
  }
}

// Skin Base Styles
@if $skin-name == 'tailwind' {
  .e-bigger .e-richtexteditor .e-toolbar .e-hor-nav{
    min-height: 50px;
  }
}
@if $skin-name == 'fabric-dark' {
  .e-bigger .e-richtexteditor .e-rte-toolbar.e-toolbar .e-hor-nav{
    min-height: 50px;
  }
}
@if $skin-name == 'bootstrap' {
  .e-bigger .e-richtexteditor .e-rte-toolbar.e-toolbar .e-hor-nav{
    min-height: 50px;
  }
}
@if $skin-name == 'bootstrap5' {
  .e-bigger .e-richtexteditor .e-rte-toolbar.e-toolbar .e-hor-nav{
    min-height: 46px;
  }
}
@if $skin-name == 'Material3' {
  .e-bigger .e-richtexteditor,
  .e-richtexteditor.e-bigger {
    .e-dialog {
      border-radius: $rte-big-dialog-border-radius;
    }
  }

  .e-bigger {
    .e-rte-container{
      border-radius: $rte-big-container-border-radius;
    }
    .e-richtexteditor{
      .e-toolbar .e-hor-nav {
        border-radius: $rte-big-toolbar-border-radius;
      }
      .e-rte-content {
        border-radius: $rte-big-toolbar-container-border-radius;
      }
    }
    .e-richtexteditor .e-toolbar-wrapper{
      border-radius: $rte-big-toolbar-wrapper-border-radius;
    }
  }
}
@if $skin-name == 'fluent2' {
  .e-bigger .e-richtexteditor {
    .e-toolbar .e-hor-nav{
      min-height: 48px;
    }
  }
}

//toolbar popup min height over riding start
.e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) .e-toolbar-item.e-toolbar-popup {
  min-height: $rte-big-popup-item-min-height;
}

.e-bigger .e-richtexteditor {
  .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
  .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) .e-toolbar-item.e-toolbar-popup,
  .e-rte-toolbar .e-toolbar-item,
  .e-rte-toolbar .e-toolbar-items .e-toolbar-item {
    .e-tbar-btn.e-btn {
      min-height: $rte-big-split-btn-height;
      min-width: $rte-big-split-btn-height;
      padding: $rte-big-split-tbar-btn-padding; //4.toolbar tbar-btn padding need to confirm and remove
      &:hover,
      &:active,
      &:focus,
      &.e-active {
        border: $rte-hover-split-btn-border;
        padding: $rte-big-split-tbar-btn-hover-padding; //4.toolbar tbar-btn padding need to confirm and remove
      }
      .e-icons {
        padding: $rte-big-split-tbar-btn-icons-padding; //4.toolbar tbar-btn padding need to confirm and remove
      }
    }
    .e-tbar-btn:not(:hover):not(:focus):not(:active):not(.e-active) {
      border: $rte-split-btn-border;
    }
  }
}

.e-bigger {
  .e-dialog.e-rte-table-popup.e-popup.e-popup-open {
    min-height: $rte-table-popup-min-height !important; /* stylelint-disable-line declaration-no-important */
  }
}

//toolbar popup min height over riding end

//Layout styles
@if $skin-name == 'Material3' {
  .e-bigger .e-richtexteditor.e-rte-tb-expand {
    border-radius: $rte-big-tb-expand-border-radius;
  }
  .e-bigger .e-richtexteditor .e-toolbar-wrapper {
    border-top-left-radius: $rte-top-left-border-radius;
    border-top-right-radius: $rte-top-right-border-radius;
  }
  .e-bigger .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar.e-extended-toolbar,
  .e-bigger .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar .e-toolbar-extended {
    border-top-left-radius: $rte-top-left-border-radius;
    border-top-right-radius: $rte-top-right-border-radius;
  }
  .e-bigger .e-rte-toolbar .e-toolbar-items {
    border-top-left-radius: $rte-toolbar-items-top-left-border-radius;
  }
  .e-bigger .e-rte-toolbar .e-hor-nav {
    border-top-right-radius: $rte-top-right-border-radius;
  }
  .e-bigger .e-rtl .e-rte-toolbar .e-hor-nav {
    border-top-left-radius: $rte-top-left-border-radius;
    border-top-right-radius: $rte-top-right-border-radius;
  }
  .e-bigger .e-rtl .e-rte-toolbar .e-toolbar-items {
    border-top-right-radius: $rte-toolbar-items-top-left-border-radius;
  }
}

.e-bigger .e-rte-elements.e-popup-open.e-rte-slashmenu .e-list-parent > li {
  padding-left: $rte-big-slashmenu-li-padding-left;
}

.e-bigger {
  .e-richtexteditor {

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

    .e-rte-content,
    .e-source-content,
    .e-rte-iframe-content {
      .e-content {
        line-height: $rte-big-content-height;

        blockquote {
          font-size: $rte-big-content-font-size;
        }

        h1 {
          font-size: $rte-big-content-h1-font-size;
          line-height: $rte-big-content-h1-line-height;
        }

        h2 {
          font-size: $rte-big-content-h2-font-size;
          line-height: $rte-big-content-h2-line-height;
        }

        h3 {
          font-size: $rte-big-content-h3-font-size;
          line-height: $rte-big-content-h3-line-height;
        }

        h4 {
          font-size: $rte-big-content-h4-font-size;
          line-height: $rte-big-content-h4-line-height;
        }

        h5 {
          font-size: $rte-big-content-h5-font-size;
          line-height: $rte-big-content-h5-line-height;
        }

        h6 {
          font-size: $rte-big-content-h6-font-size;
          line-height: $rte-big-content-h6-line-height;
        }

        h3 + h4 {
          margin-top: $rte-big-content-h3-h4-tag-margin-top;
        }

        h4 + h5 {
          margin-top: $rte-big-content-h4-h5-tag-margin-top;
        }

        h5 + h6 {
          margin-top: $rte-big-content-h5-h6-tag-margin-top;
        }
      }
    }
  }
  .e-rte-dropdown-popup {
    ul {
      .e-item {
        &.e-h1 {
          font-size: $rte-big-content-ul-h1-font-size;
        }

        &.e-h2 {
          font-size: $rte-big-content-ul-h2-font-size;
        }

        &.e-h3 {
          font-size: $rte-big-content-ul-h3-font-size;
        }

        &.e-h4 {
          font-size: $rte-big-content-ul-h4-font-size;
        }

        &.e-h5 {
          font-size: $rte-big-content-ul-h5-font-size;
        }

        &.e-h6 {
          font-size: $rte-big-content-ul-h6-font-size;
        }
      }
    }
  }
}