@use 'ej2-base/styles/common/mixin' as *;
@include export-module('blockeditor-theme') {

  /* ======== Main Editor ======== */
  .e-blockeditor {
    background: $be-bg-color;
    color: $be-color;
    a {
      color: $be-link-anchor-color;
    }

    /* ======== Drag and Drop Styles ======== */
    .e-be-drop-indicator {
      background: $be-drop-indicator-bg-color;
      &::before {
        background: $be-drop-indicator-bg-color;
      }
    }
    .e-be-dragging-clone {
      background: $be-dragging-clone-bg-color;
    }

    /* DividerBlock */
    .e-divider-block {
      &.e-divider-selected {
        .e-be-hr-wrapper {
          background: $be-divider-selected-bg-color;
        }
      }
      .e-be-hr {
        border: $be-hr-border solid $be-divider-border-color;
      }
    }

    /* ======== Blocks Level styles ======== */
    .e-block {

      [contenteditable = 'true']:empty::before {
        color: $be-block-placeholder-color;
      }

      /* List Block Styles */
      &.e-list-block {

        /* Checklist Block */
        &[data-block-type = 'Checklist'] {
          .e-checkmark-border {
            stroke: $be-checklist-marker-border-color;
          }

          .e-checkmark-bg {
            fill: $be-checklist-marker-checked-bg-color;
            stroke: $be-checklist-marker-checked-border-color;
          }

          .e-checkmark-color {
            fill: $be-checklist-marker-checked-color;
          }

          &:has(.e-checked) {
            .e-checkmark-border {
              stroke: $be-checklist-marker-checked-border-color;
            }

            li.e-checked:not(:empty) {
              color: $be-checked-block-strikethrough-color;
            }
          }
        }
      }

      /* Quote Block */
      &.e-quote-block blockquote {
        border-left-color: $be-blockquote-border-color;
      }

      /* Callout Block */
      &.e-callout-block {
        .e-callout-wrapper {
          background: $be-callout-bg-color;
        }
      }
    }

    /* ======== Blocks Content Level styles ======== */
    .e-block-content {
      &::selection {
        background: $be-text-selection-bg-color;
      }

      /* Inline code */
      .e-be-inline-code {
        background: $be-inline-code-bg-color;
        color: $be-inline-code-text-color;
      }
    }

    /* ======== Code Block Styles ======== */
    .e-code-block-container {
      background: $be-code-block-container-bg-color;
      border: $be-code-block-container-border-width solid $be-code-block-container-border-color;
    }
    .e-code-block {
      background-color: $be-code-block-container-bg-color;
      color: $be-color;
      .e-block-content {
        background: transparent;
      }
    }
    .e-code-block-toolbar {
      background: $be-code-block-container-bg-color;
    }

    .e-code-block-languages {
      border: $be-code-block-lang-border-width solid $be-code-block-lang-border-color;
      background: $be-code-block-lang-bg-color;
      box-shadow: unset;
    }

    .e-code-block-copy-button {
      background: $be-code-copy-btn-bg-color;
      @if ($skin-name == 'Material3' or $skin-name == 'tailwind3' or $skin-name == 'material' or $skin-name == 'material-dark') {
        box-shadow: none;
      }
      .e-icons {
        color: $be-code-copy-btn-color;
      }
    }

    .e-code-block-copy-button:hover,
    .e-code-block-copy-button:active {
      background: $be-code-copy-btn-bg-color-hover;
      .e-icons {
        color: $be-code-copy-btn-color-hover;
      }
    }

    /* ======== Table Block Styles ======== */
    .e-table-block {
      th,
      td {
        border: $be-table-block-border solid $be-table-border-color;
      }
      thead tr {
        background: $be-table-header-row-bg-color;
        color: $be-table-header-color;
      }
      tbody tr {
        background: $be-table-body-row-bg-color;
        color: $be-table-body-color;
      }
      :not(:has([data-resizing = 'true'])) tr:hover {
        background: $be-table-row-hover-bg-color;
        color: $be-table-row-hover-color;
        .e-cell-focus {
          @if $theme-name == 'fluent2-highcontrast'{
            border-color: rgba(255, 255, 255, 1);
          }
        }
      }
      tr:has(.e-cell-focus) {
        color: $be-table-row-focus-color;
        @if $theme-name == 'fluent2-highcontrast'{
          color: rgba(255, 255, 255, 1);
        }
      }
      .e-cell-focus {
        border: $be-cell-focus-outline double $be-table-cell-focus-color;
      }
      .e-col-action-handle:not(.e-action-bar-active):hover,
      .e-row-action-handle:not(.e-action-bar-active):hover {
        background-color: $be-table-gripper-hover-bg;
        color: $be-table-gripper-hover-color;
      }
      .e-action-bar-active {
        background-color: $be-table-row-gripper-pressed-bg;
        color: $be-table-row-gripper-pressed-color;
        border: 1px double $be-table-row-col-selected-border;
      }
      .e-col-selected {
        background-color: $be-table-col-selected-bg;
      }
      .e-row-selected {
        background-color: $be-table-row-selected-bg;
      }

      tr.e-row-selected td,
      .e-col-selected {
        border: 1px double $be-table-row-col-selected-border;
        @if $theme-name == 'fluent2-highcontrast'{
          border-color: rgba(255, 255, 255, 1);
        }
        box-shadow: unset;
      }
    }
    .e-row-add-indicator,
    .e-col-add-indicator {
      background: $be-table-add-indicator-bg-color;
      color: $be-table-add-indicator-color;
    }
    .e-row-hover-line,
    .e-col-hover-line {
      background: $be-table-hover-line-bg-color;
    }

    .e-table-hover-icon {
      background-color: rgba(224, 224, 224, 1);
    }

    .e-block {
      .e-row-dot,
      .e-col-dot {
        border: 1px solid $be-table-row-gripper-pressed-bg;
        background: $be-bg-color;
      }
      .e-row-insert-handle,
      .e-col-insert-handle {
        color: $be-table-insert-handle-color;
        border: 1px solid $be-table-insert-handle-border;
        background-color: $be-table-insert-handle-bg;
      }
      .e-row-hover-line,
      .e-col-hover-line {
        background: $be-table-row-col-hover-line;
      }
    }

    /* ======== Image Block Styles ======== */
    .e-image-block {
      &.e-image-focus,
      &:hover {
        outline: $be-image-focus-outline solid $be-table-cell-focus-color;
      }
    }

    /* ======== Image placeholder Styles ======== */
    .e-image-placeholder {
      border: $be-image-placeholder-border-width solid $be-image-placeholder-border-color;
      background-color: $be-image-placeholder-bg-color;

      .e-placeholder-icon-container {
        .e-icons {
          color: $be-image-placeholder-icon-color;
        }
      }

      .e-placeholder-text {
        color: $be-image-placeholder-text-color;
      }
    }

    /* ======== Audio Block Styles ======== */
    .e-audio-block {
      &:hover {
        outline: $be-audio-block-outline solid $be-table-cell-focus-color;
      }
    }

    /* ======== Video Block Styles ======== */
    .e-video-block {
      &.e-video-focus,
      &:hover {
        outline: $be-video-block-outline solid $be-table-cell-focus-color;
      }
    }

    /* ======== Selection Overlay ======== */
    .e-be-selection-overlay {
      border: $be-selection-overlay-border-width solid $be-selection-overlay-border-color;
      background: $be-selection-overlay-bg-color;
    }
  }

  .e-table-gripper-action-popup {
    background: $be-inline-toolbar-popup-bg-color;
    border: $be-inline-toolbar-border-width solid $be-inline-toolbar-popup-border-color;
    box-shadow: $be-inline-toolbar-popup-shadow;
    .e-icons {
      color: $be-table-popup-icon-color;
      &:hover {
        background: $be-table-popup-icon-hover-bg;
        border-color: $be-table-popup-icon-hover-bg;
        color: $be-table-popup-icon-hover-color;
      }
      &:active {
        background: $be-table-popup-icon-pressed-bg;
        border-color: $be-table-popup-icon-pressed-bg;
        color: $be-table-popup-icon-pressed-color;
      }
    }
  }

  /* ======== Floating Icons Styles ======== */
  .e-floating-icon {
    border: $be-floating-icon-border-width solid $be-floating-icon-border-color;
    color: $be-floating-icon-color;
    background: transparent;
    &:hover {
      background: $be-floating-icon-hover-bg-color;
      color: $be-floating-icon-color-hover;
    }
    &.e-drag-icon-selected {
      background: $be-drag-icon-selected-bg-color;
      color: $be-drag-icon-selected-color;
    }
  }

  /* ======== Inline Toolbar styles ======== */
  .e-blockeditor-inline-toolbar-popup {
    border: $be-inline-toolbar-border-width solid $be-inline-toolbar-popup-border-color;
    background: $be-inline-toolbar-popup-bg-color;
    box-shadow: $be-inline-toolbar-popup-shadow;
    @if $theme-name == 'fluent2-highcontrast'{
      border: 1px solid #ffff;
    }
    @else if $theme-name == 'Material3'{
      border: none;
      box-shadow: none;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
    }
    .e-toolbar-item {
      &.e-active {
        .e-btn {
          background: $be-inline-toolbar-item-active-bg-color;
        }
        .e-tbar-btn .e-icons,
        .e-tbar-btn:focus .e-icons {
          color: $be-inline-toolbar-item-active-color;
        }
      }
      .e-tbar-btn.e-toolbar-color-dropdown,
      .e-tbar-btn.e-toolbar-bgcolor-dropdown {
        &:hover .e-be-color-icon-wrapper {
          @if ($skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5') {
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
    .e-blockeditor-inline-toolbar .e-toolbar-items .e-toolbar-item {
      .e-split-btn-wrapper {
        .e-dropdown {
          &:hover{
            background: $be-quick-tb-btn-hover;
            color: var(--color-sf-toolbar-icon-color);
          }
          &:focus {
            background: $be-quick-pop-item-focus-bg;
            color: var(--color-sf-toolbar-icon-color);
          }
          &:active {
            background: $be-quick-item-active-bg;
            color: var(--color-sf-toolbar-icon-color);
          }
        }
      }
    }
    .e-blockeditor-inline-toolbar .e-toolbar-items .e-toolbar-item {
      .e-split-btn-wrapper {
        border-radius: $be-split-btn-border-radius;
        .e-dropdown {
          @if $theme-name == 'bootstrap5' {
            background: $content-bg-color;
          }
          @else if $theme-name == 'bootstrap5-dark' {
            background: $content-bg-color-alt2;
          }
          @else {
            background: $be-quick-popup-bg-color;
          }
          border: $be-split-btn-border;
        }
      }
    }
    
    .e-blockeditor-inline-toolbar .e-toolbar-items .e-toolbar-item {
      .e-split-btn-wrapper {
        &:hover {
          background: $be-split-btn-hover-bg;
          .e-dropdown {
            border: $be-hover-split-btn-border;
            @if $theme-name == 'Material3' or $theme-name == 'Material3-dark' {
              border-image: none;
            }
          }
          .e-split-btn:hover,
          .e-dropdown-btn:hover {
            @if $theme-name != 'fluent2-highcontrast' {
              background: $be-split-btn-span-hover-bg;
            }
            @if $theme-name == 'fluent2-highcontrast' {
              background: $be-split-btn-hover-bg;
            }
          }
          .e-split-btn,
          .e-dropdown-btn {
            &:not(:hover) {
              background: transparent;
            }
          }
          .e-icons {
            @if $theme-name != 'bootstrap5.3' {
              color: $be-hover-icons-color;
            }
            @if $theme-name == 'bootstrap5.3' {
              color: $be-hover-icons-color;
            }
          }
        }
        &:active {
          .e-dropdown {
            border: $be-hover-split-btn-border;
            &:active {
              @if $theme-name == 'Material3' or $theme-name == 'Material3-dark' {
                border-image: none;
              }
            }
          }
          .e-icons {
            color: $be-active-btn-icons-color;
          }
        }
        &:focus {
          background: $be-split-btn-span-hover-bg;
          .e-dropdown {
            border: $be-hover-split-btn-border;
            &:focus {
              @if $theme-name == 'Material3' or $theme-name== 'Material3-dark' {
                border-image: none;
              }
            }
          }
          .e-split-btn:focus,
          .e-dropdown-btn:focus {
            background: $be-split-btn-span-hover-bg;
          }
          .e-split-btn,
          .e-dropdown-btn {
            &:not(:focus) {
              background: transparent;
            }
          }
          .e-icons {
            color: $be-icon-color;
            @if ($theme-name == 'fluent2' or $theme-name == 'tailwind3') {
              color: $be-default-icon-color;
            }
          }
        }
      }
      .e-split-btn-wrapper:has(.e-dropdown-btn.e-active) {
        .e-split-btn,
        .e-dropdown-btn {
          @if $theme-name == 'bootstrap-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
            border: $be-hover-split-btn-border;
          }
          @if $theme-name != 'bootstrap5.3' {
            color: $be-hover-icons-color;
          }
          @if $theme-name == 'bootstrap5.3' {
            color: $be-hover-icons-color;
          }
        }
      }
      .e-split-btn-wrapper .e-split-btn + .e-dropdown-btn.e-active {
        background: $be-drop-btn-active-bg;
      }
      .e-split-btn-wrapper:has(.e-dropdown-btn.e-active) .e-split-btn {
        background: $be-split-btn-hover-bg;
      }
      .e-colorpicker-wrapper:focus-visible,
      .e-split-btn-wrapper:focus-visible {
        @if $theme-name == 'bootstrap-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
          border: $be-hover-split-btn-border;
        }
        @if $theme-name != 'fluent2-highcontrast' {
          background: $be-split-btn-focus-bg;
        }
        @if $theme-name == 'fluent2-highcontrast' {
          background: $be-split-btn-hover-bg;
        }
        box-shadow: $be-button-focus-box-shadow;
        .e-split-btn,
        .e-dropdown-btn {
          &:not(:focus-visible) {
            background: transparent;
            @if $theme-name != 'bootstrap5.3' {
              color: $be-icon-color;
            }
            @if $theme-name == 'bootstrap5.3' {
              color: $be-hover-icons-color;
            }
          }
        }
      }
      .e-split-btn-wrapper:not(:focus-visible):has(.e-dropdown-btn:focus-visible),
      .e-split-btn-wrapper:not(:focus-visible):has(.e-split-btn:focus-visible) {
        @if $theme-name == 'bootstrap-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
          border: $be-hover-split-btn-border;
        }
        @if $theme-name != 'fluent2-highcontrast' {
          background: $be-split-btn-focus-bg;
        }
        @if $theme-name == 'fluent2-highcontrast' {
          background: $be-split-btn-hover-bg;
        }
        box-shadow: $be-button-focus-box-shadow;
        .e-split-btn,
        .e-dropdown-btn {
          background: transparent;
          @if $theme-name != 'bootstrap5.3' {
            color: $be-icon-color;
          }
          @if $theme-name == 'bootstrap5.3' {
            color: $be-hover-icons-color;
          }
        }
      }
      .e-split-btn-wrapper {
        .e-split-btn,
        .e-dropdown-btn {
          background: transparent;
          @if $theme-name != 'bootstrap5.3' {
            color: $be-icon-color;
          }
        }
      }
    }
  }

  /* User and label mention styles */
  .e-mention.e-blockeditor-mention-menu.e-popup {
    .e-list-item:not(.e-active) {
      .em-avatar {
        color: $be-mention-menu-avatar-text-color;
      }
      .em-content {
        .em-text {
          color: $be-ctmenu-text-color;
        }
        .e-icons {
          color: $be-ctmenu-icon-color;
        }
      }
    }
  }

  /* ======== Block Action styles ======== */
  .e-blockeditor-blockaction-popup {
    .e-menu-item:not(.e-disabled) {
      .e-blockaction-item-template {
        .e-action-icon {
          color: $be-ctmenu-icon-color;
        }
        .e-action-item-label {
          color: $be-ctmenu-text-color;
        }
        .e-action-item-shortcut {
          color: $be-ctmenu-shortcut-color;
        }
      }
    }
  }

  /* ======== Slash Command styles ======== */
  .e-blockeditor-command-menu.e-popup {
    .e-list-item:not(.e-disabled):not(.e-active):not(.e-hover) {
      .e-command-mention-item-template {
        .e-command-icon {
          color: $be-ctmenu-icon-color;
        }
        .e-command-title {
          color: $be-ctmenu-text-color;
        }
        .e-command-shortcut {
          color: $be-ctmenu-shortcut-color;
        }
      }
    }
  }

  /* Context menu styles */
  .e-blockeditor-contextmenu ul {
    .e-menu-item:not(.e-disabled) {
      .e-ctmenu-icon {
        color: $be-ctmenu-icon-color;
      }
      .e-ctmenu-text {
        color: $be-ctmenu-text-color;
      }
      .e-ctmenu-shortcut {
        color: $be-ctmenu-shortcut-color;
      }
    }
  }

  /* ======== common styles for mention and popup menu ======== */
  .e-blockeditor-mention-menu.e-popup,
  .e-blockeditor-blockaction-popup,
  .e-blockeditor-contextmenu ul {
    border: $be-mention-popup-border-width solid $be-mention-popup-border-color;
    background: $be-mention-popup-bg-color;
    box-shadow: $be-mention-popup-shadow;
  }

  /* Image upload popup styles */
  .e-image-upload-popup {
    border: $be-image-upload-popup-boder-width solid $be-image-upload-popup-boder-color;
    background-color: $be-image-upload-popup-bg-color;
    box-shadow: $be-image-upload-popup-box-shadow;

    .e-tab .e-content {
      border-top: 1px solid $be-upload-popup-tab-content-border-top-color;
    }

    .e-uploader-container.e-upload-drag-hover .e-upload{
      border-color: $be-upload-popup-drag-boder-color;
      background-color: $be-upload-popup-drag-hover-color;
    }
  }
}