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

  /* ======== Main Editor ======== */
  .e-blockeditor {
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    display: block;

    &:has([data-resizing = 'true']) {
      cursor: col-resize;
    }
    .e-block-container {
      font-family: $be-font-family;
      font-size: $be-font-size;
      font-weight: $be-font-weight;
      line-height: $be-line-height;
      .em-content {
        font-family: $be-font-family;
        font-size: $be-font-size;
        line-height: $be-line-height;
      }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      margin: $be-heading-margin;
      padding: $be-heading-padding;
    }
    h1 {
      font-size: $be-h1-font-size;
      font-weight: $be-h1-font-weight;
      line-height: $be-h1-line-height;
    }

    h2 {
      font-size: $be-h2-font-size;
      font-weight: $be-h2-font-weight;
      line-height: $be-h2-line-height;
    }

    h3 {
      font-size: $be-h3-font-size;
      font-weight: $be-h3-font-weight;
      line-height: $be-h3-line-height;
    }

    h4 {
      font-size: $be-h4-font-size;
      font-weight: $be-h4-font-weight;
      line-height: $be-h4-line-height;
    }

    h5 {
      font-size: $be-h5-font-size;
      font-weight: $be-h5-font-weight;
      line-height: $be-h5-line-height;
    }

    h6 {
      font-size: $be-h6-font-size;
      line-height: $be-h6-font-weight;
      line-height: $be-h6-line-height;
    }

    /* Remove default styles */
    ul,
    ol {
      margin-block: initial;
      margin-inline: initial;
      padding-block: initial;
      padding-inline: initial;
    }
    ol {
      list-style: none;
    }
    a {
      text-decoration: none;
      user-select: auto;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }

    /* ======== Block Container ======== */
    .e-block-container {
      &.e-mention.e-editable-element {
        width: 100%;
        padding: $be-editable-element-padding;
        border: $be-editable-element-border;
      }
    }

    /* ======== Horizontal Scrollable Block styles ======== */
    .e-scrollable-block {
      overflow-x: auto;
      scroll-behavior: smooth;
      position: relative;
    }

    /* ======== Divider Blocks Level styles ======== */
    .e-divider-block {
      display: flex;
      align-items: center;
      justify-content: center;
      .e-be-hr-wrapper {
        width: 100%;
        height: $be-hr-wrapper-height;
      }
      .e-be-hr {
        margin: $be-hr-margin;
      }
    }

    /* ======== Blocks Level styles ======== */
    .e-block {
      position: relative;
      flex-grow: 1;
      min-height: 30px;
      padding: $be-block-padding;
      border: $be-block-border solid transparent;
      border-radius: $be-block-border-radius;
      padding-left: $be-block-padding-left; /* padding for the floating icons position */

      [contenteditable = 'true']:empty::before {
        content: attr(placeholder);
      }

      &[data-block-type = 'Table'] {
        user-select: none;
        padding: $be-block-table-padding;
        padding-left: $be-block-table-padding-left;
      }

      /* List Block Styles */
      &.e-list-block {
        margin-left: $be-list-block-margin-left;

        ol li {
          padding-left: $be-list-ol-li-padding-left;
          position: relative;
          left: 4px;
        }

        li::marker {
          font-size: $be-numberlist-font-size;
        }

        /* Checklist Block */
        &[data-block-type = 'Checklist'] {
          align-items: center;
          display: flex;
          margin-left: $be-block-Checklist-margin-left;
          ul {
            word-break: break-word;
            list-style: none;
          }

          ul li {
            padding-left: $be-list-ul-li-padding-left;
          }

          .e-checkmark-container {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            vertical-align: text-bottom;
            user-select: none;
            cursor: pointer;
            height: $be-checkbox-height;
            width: $be-checkbox-width;
            svg{
              height: inherit;
              width: inherit;
            }
          }

          &:has(.e-checked) {
            li.e-checked:not(:empty) {
              text-decoration: line-through;
            }
          }
        }
        &[data-block-type = 'BulletList'] {
          margin-left: 20px;
        }
      }

      /* Quote Block */
      &.e-quote-block blockquote {
        border-left-width: $be-blockquote-left-width;
        border-left-style: solid;
        padding: unset;
        font-size: unset;
        padding-left: $be-blockquote-text-padding;
        margin: $be-blockquote-margin;
        &.e-quote-content .e-block {
          padding-left: 0;
        }
      }

      /* Callout Block */
      &.e-callout-block {
        .e-block {
          padding-left: $be-callout-block-padding-left;
        }

        .e-callout-wrapper {
          display: flex;
          align-items: flex-start;
          padding: $be-callout-padding;
          border-radius: $be-callout-border-radius;
        }

        .e-callout-icon {
          position: absolute;
          height: $be-callout-icon-height;
          width: $be-callout-icon-width;
          margin-top: $be-callout-icon-margin-top;
          margin-left: $be-callout-icon-margin-left;
          user-select: none;
          z-index: 1;
          pointer-events: none;
          svg {
            height: $be-callout-block-svg-height;
            width: inherit;
          }
        }

        .e-callout-content {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }
      }

      /* Toggle Block */
      &.e-toggle-block {
        .e-block {
          padding-left: $be-toggle-block-padding-left;
        }

        .e-toggle-header {
          display: flex;
          align-items: center;
          margin-bottom: $be-toggle-header-margin-bottom;
        }

        .e-toggle-icon {
          display: flex;
          align-items: center;
          transition: transform .25s ease;
          transform-origin: center center;
          height: $be-toggle-icon-height;
          width: $be-toggle-icon-width;
          margin-right: $be-toggle-icon-margin;
          user-select: none;
          cursor: pointer;
          svg {
            height: $be-toggle-block-svg-height;
            width: inherit;
          }
        }

        &[data-collapsed = 'false'] {
          .e-toggle-icon {
            transform: rotate(90deg);
          }
        }
      }

      /* User and label mention Chip styles */
      .e-user-chip {
        display: inline-flex;
        cursor: default;
        gap: $be-user-chip-gap;
        height: 24px;
        padding: 2px;
        border-radius: $be-user-mention-chip-border-radius;
        align-items: baseline;
        .em-avatar {
          height: $be-user-mention-avatar-height;
          width: $be-user-mention-avatar-width;
          font-size: $be-user-mention-chip-font-size;
          line-height: $be-user-mention-chip-line-height;
          border-radius: $be-em-avatar-border-radius;
          display: inline-block;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          pointer-events: none;
          .em-img {
            width: 100%;
            height: $be-em-img-height;
            object-fit: cover;
            border-radius: $be-em-img-border-radius;
          }
        }
        .em-text {
          font-size: $be-user-mention-chip-font-size;
          line-height: $be-user-mention-chip-line-height;
          font-weight: $be-user-mention-chip-font-weight;
        }
      }

      .e-label-chip {
        height: 26px;
        padding: 2px 4px;
        font-size: $be-label-mention-chip-font-size;
        line-height: $be-label-mention-chip-line-height;
        border-radius: $be-label-mention-chip-border-radius;
        display: inline-block;
      }

      .e-block-content {
        white-space: break-spaces;

        /* Inline code */
        .e-be-inline-code {
          font-size: $be-inline-code-font-size;
          font-weight: $be-inline-code-font-weight;
          line-height: $be-inline-code-line-height;
          padding: $be-inline-code-padding;
          border-radius: $be-inline-code-border-radius;
          white-space: pre-wrap;
        }
        .e-mention-chip {
          white-space: nowrap;
        }
      }
    }

    /* ======== Drag and Drop Styles ======== */
    .e-be-drop-indicator {
      position: absolute;
      width: $be-drop-indicator-width; /* calc of padding of e-block */
      height: $be-drop-indicator-height;
      margin: $be-drop-indicator-margin;
      left: 46px; /* calc of padding left of e-block with indicator width */
      &::before {
        position: absolute;
        border-radius: $be-drop-indicator-border-radius;
        content: '';
        height: $be-drop-indicator-before-height;
        width: $be-drop-indicator-before-width;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .e-divider-block .e-be-drop-indicator {
      margin-top: $be-divider-drop-indicator-top;
    }
    .e-be-dragging-clone {
      border-radius: $be-drag-clone-border-radius;
      .e-block {
        padding: $be-drag-clone-block-padding;
        padding-left: $be-dragging-clone-block-padding-left;

        &.e-callout-block {
          .e-block {
            padding-left: $be-dragging-clone-callout-block-padding-left;
          }
        }

        &.e-toggle-block {
          .e-block {
            padding-left: $be-dragging-clone-toggle-block-padding-left;
          }
        }
      }
    }
    &:has(.e-be-dragging-clone) .e-floating-icons {
      display: none;
    }
    .e-block-container {
      .e-block:first-child .e-be-drop-indicator:first-child {
        top: -5px;
        margin-top: $be-block-container-margin-top;
      }
    }

    /* ======== Code Block Styles ======== */
    .e-code-block-container {
      border-radius: $be-code-block-border-radius;
      overflow: hidden;

      .e-ddl {
        height: $be-code-block-container-ddl-height;
        width: auto !important; /* stylelint-disable-line declaration-no-important */
        flex-shrink: 1;
        align-self: flex-start;
      }
      .e-ddl,
      .e-code-block-dropdown-btn {
        flex-basis: auto;
        order: 3;
      }

      /* Blazor specific styles for ddb */
      .e-code-block-dropdown-btn {
        min-width: 200px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .e-code-block-toolbar {
      display: flex;
      align-items: center;
      padding: $be-code-block-toolbar-padding;
      min-height: $be-code-toolbar-height;
      flex-flow: row-reverse;
      width: 100%;
      height: $be-code-block-toolbar-height;
      box-sizing: border-box;

      /* Blazor specific styles for dropdown button */
      .e-code-block-dropdown-btn {
        font-weight: $be-font-weight;
      }
    }

    .e-code-block-languages {
      margin-left: $be-code-block-languages-margin-left;
      padding: $be-code-block-lang-padding;
      border-radius: $be-code-block-lang-border-radius;
      outline: none;
      width: 248px;
      height: $be-code-lang-height;
    }

    .e-code-block-copy-button {
      border: none;
      cursor: pointer;
      padding: $be-code-copy-btn-padding;
      margin-left: $be-code-block-copy-btn-margin-left;
      border-radius: $be-code-copy-btn-border-radius;
      display: flex;
      align-items: center;
      justify-content: center;
      width: $be-code-copy-btn-width;
      height: $be-code-copy-btn-height;
      .e-icons {
        font-size: $be-code-copy-btn-font-size;
      }
    }

    .e-code-block {
      min-height: 100px;
      max-height: 200px;
      margin: $be-code-block-margin;
      padding: $be-code-block-padding;
      border: $be-code-block-border;
      border-radius: $be-code-block-radius;
      overflow-x: auto;
      font-size: $be-font-size;
      line-height: $be-line-height;
      white-space: break-spaces;
      word-break: inherit;
      word-wrap: break-word;
    }

    /* ======== Table Block Styles ======== */
    .e-table-block {
      .e-table-container {
        padding-bottom: 10px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
      }
      th,
      td {
        min-width: 60px;
        box-sizing: border-box;
      }
      th {
        height: $be-table-heading-height;
        padding: $be-table-heading-padding;
        font-weight: $be-table-heading-font-weight;
        font-size: $be-table-heading-font-size;
        line-height: $be-table-heading-line-height;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        &:focus,
        &:focus-within,
        &.e-cell-focus {
          text-overflow: clip;
        }
      }
      td {
        height: $be-table-col-height;
        padding: $be-table-col-padding;
        font-weight: $be-table-col-font-weight;
        font-size: $be-table-col-font-size;
        line-height: $be-table-col-line-height;

        &:has(.e-block) {
          padding-top: 0;
          padding-bottom: 0;
        }
      }
      .e-cell-focus {
        outline-offset: -2px;
      }
      &.e-readonly {
        pointer-events: none;
      }

      .e-block {
        padding-left: calc(0px + var(--block-indent) * 1px);
        .e-block-content {
          overflow-wrap: anywhere;
        }
      }
    }

    .e-block {
      .e-row-dot,
      .e-col-dot {
        position: absolute;
        width: $be-row-col-dot-width;
        height: $be-row-col-dot-width;
        border-radius: $be-table-icons-border-radius;
        z-index: 7;
        cursor: pointer;
      }
      .e-row-hover-line,
      .e-col-hover-line {
        position: absolute;
        z-index: 4;
      }
      .e-row-insert-handle,
      .e-col-insert-handle {
        position: absolute;
        z-index: 9;
        display: none;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border-radius: $be-table-icons-border-radius;
        font-size: $be-table-row-col-insert-handle-size;
        line-height: $be-table-row-col-insert-handle-line-height;
        text-align: center;
        cursor: pointer;
      }
      .e-row-action-handle,
      .e-col-action-handle {
        position: absolute;
        z-index: 6;
        display: none;
        align-items: center;
        justify-content: center;
        border-top-left-radius: $be-table-gripper-border-radius;
        cursor: pointer;
      }
      .e-row-action-handle {
        border-bottom-left-radius: $be-table-gripper-border-radius;
        width: $be-table-row-gripper-width;
        left: $be-table-row-gripper-left;
      }
      .e-col-action-handle {
        border-top-right-radius: $be-table-gripper-border-radius;
        height: $be-table-col-gripper-height;
        top: $be-table-col-gripper-top;
      }
      .e-row-dot-hit,
      .e-col-dot-hit {
        position: absolute;
        z-index: 7;
      }
      .e-col-resize-handle {
        position: absolute;
        width: 5px;
        cursor: col-resize;
        z-index: 20;
        display: none;
      }
      .e-row-dot-hit {
        width: 22px;
        height: 26px;
      }
      .e-col-dot-hit {
        width: 26px;
        height: 22px;
      }
    }

    .e-table-element {
      width: inherit;
      .e-row-number {
        text-align: center;
      }
      thead th.e-row-number {
        user-select: none;
      }
    }

    .e-row-hover-line {
      height: $be-row-hover-line-height;
    }
    .e-col-hover-line {
      width: 2px;
    }

    /* ======== Image Block Styles ======== */
    .e-image-container {
      margin: $be-image-container-margin;
      max-width: 100%;
      .e-image-rsz-handle.e-resize-nw {
        top: -4px;
        left: -4px;
        cursor: nwse-resize;
      }

      .e-image-rsz-handle.e-resize-ne {
        top: -4px;
        right: -4px;
        cursor: nesw-resize;
      }

      .e-image-rsz-handle.e-resize-se {
        bottom: -4px;
        right: -4px;
        cursor: nwse-resize;
      }

      .e-image-rsz-handle.e-resize-sw {
        bottom: -4px;
        left: -4px;
        cursor: nesw-resize;
      }
      .e-image-block {
        display: block;
        height: $be-image-block-height;
        max-width: 100%;
      }
      &.e-readonly {
        pointer-events: none;
      }
      &.e-readonly .e-image-rsz-handle {
        display: none;
      }
      .e-badge {
        position: absolute;
        top: $be-image-block-badge-top;
        right: $be-image-block-badge-right;
      }
    }

    /* ======== Image placeholder Styles ======== */
    .e-image-placeholder {
      user-select: none;
      display: flex;
      align-items: center;
      height: $be-image-placeholder-ele-height;
      border-radius: $be-image-placeholder-ele-border-radius;
      padding: $be-image-placeholder-ele-padding;
      gap: $be-image-placeholder-text-icon-gap;

      .e-placeholder-icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;

        .e-icons {
          font-weight: $be-image-placeholder-icon-font-weight;
          font-size: $be-image-placeholder-icon-font-size;
        }
      }

      .e-placeholder-text {
        font-weight: $be-image-placeholder-text-font-weight;
        font-size: $be-image-placeholder-text-font-size;
        line-height: $be-image-placeholder-text-line-height;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    /* ======== Selection Overlay ======== */
    .e-be-selection-overlay {
      position: absolute;
      pointer-events: none;
      box-sizing: border-box;
      opacity: .5;
      z-index: 1000;
      border-radius: $be-selection-overlay-border-radius;
    }

    /* ======== RTL Styles ======== */
    &.e-rtl {

      /* Block Styles */
      .e-block {

        /* Callout Block Styles */
        &.e-callout-block {
          .e-block {
            padding-right: $be-rtl-callout-block-padding-right;
            padding-left: $be-rtl-callout-block-padding-left;
          }
        }

        /* Toggle Block */
        &.e-toggle-block {
          .e-block {
            padding-right: $be-rtl-toggle-block-padding-right;
            padding-left: $be-rtl-toggle-block-padding-left;
          }
        }

        /* List Block Styles */
        &.e-list-block {
          margin-right: $be-rtl-list-block-margin-right;
          margin-left: $be-rtl-list-block-margin-left;

          ul li {
            padding-right: $be-rtl-ul-li-padding-right;
            padding-left: $be-rtl-ul-li-padding-left;
          }

          ol li {
            padding-right: $be-rtl-ol-li-padding-right;
            padding-left: $be-rtl-ol-li-padding-left;
            right: 4px;
            left: 0;
          }

          /* Checklist Block */
          &[data-block-type = 'Checklist'] {
            margin-right: $be-rtl-block-Checklist-margin-right;
            margin-left: $be-rtl-block-Checklist-margin-left;
          }

          /* Padding adjustment for Bullet and Numbered list Block */
          &[data-block-type = 'BulletList'],
          &[data-block-type = 'NumberedList'],
          &[data-block-type = 'Checklist'] {
            padding-left: $be-rtl-list-block-padding-left;
            padding-right: $be-rtl-list-block-padding-right;
          }
        }
      }
    }
  }

  .e-table-gripper-action-popup {
    display: flex;
    padding: $be-table-gripper-action-popup-padding;
    border-radius: $be-table-gripper-action-popup-border-radius;
    justify-content: center;
    align-items: center;
    .e-icons {
      cursor: pointer;
      font-size: $be-table-popup-icon-size;
      line-height: 100%;
      padding: $be-table-popup-icon-padding;
      border-radius: 4px;
    }
  }

  /* floating icons tooltip styles */
  .e-be-floating-icon-tooltip {
    .e-tip-content {
      text-align: center;
    }
  }

  /* ======== Floating Icons styles ======== */
  .e-floating-icon {
    box-sizing: border-box;
    width: $be-floating-icon-width;
    height: $be-floating-icon-height;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $be-floating-icon-font-size;
    line-height: $be-floating-icon-line-height;
    font-weight: $be-floating-icon-font-weight;
    border-radius: $be-floating-icon-border-radius;
    cursor: pointer;
  }

  .e-floating-icons {
    gap: $be-floating-icons-gap;
  }

  /* Blazor specific styles for label */
  .e-blockeditor-mention-menu.e-popup-open{
    .e-dropdownbase.e-dd-group .e-list-item {
      padding-left: 0;
    }
  }

  .e-blockeditor-mention-menu.e-popup-open{
    .e-dropdownbase.e-dd-group {
      .em-content{
        .e-settings{
          border-left: 0;
          padding: 0;
          box-sizing: unset;
        }
      }
    }
  }

  /* Common for all mention menu */
  .e-blockeditor-mention-menu.e-popup {
    .e-dropdownbase {
      padding: $be-mention-popup-padding;
    }

    /* To override the textindent style of e-list-item */
    ul.e-list-parent.e-ul * {
      text-indent: 0;
    }

    &.e-rtl {
      .e-dropdownbase .e-list-item {
        padding-right: $be-rtl-list-item-padding-right;
        padding-left: $be-rtl-list-item-padding-left;
      }
    }
  }

  /* ======== common styles for mention and popup menu ======== */
  .e-blockeditor-mention-menu.e-popup,
  .e-blockeditor-blockaction-popup,
  .e-blockeditor-contextmenu ul {
    border-radius: $be-mention-popup-border-radius;
  }

  /* Table gripper action popup styles */
  .e-blockeditor .e-be-gripper-action-popup-hide {
    display: flex;
    visibility: hidden;
  }

  /* ======== Block Action styles ======== */
  .e-blockeditor-blockaction-popup {
    &.e-be-action-popup-hide {
      display: flex;
      visibility: hidden;
    }
    .e-menu-wrapper,
    .e-menu-container {
      width: 100%;
      padding: $be-mention-popup-padding;
      ul .e-menu-item {
        height: $be-menu-item-height;
        line-height: $be-blockaction-menu-line-height;
        padding: $be-blockaction-menu-padding;
        .e-blockaction-item-template {
          display: flex;
          min-height: 32px;
          align-items: center;
          gap: $be-ctmenu-content-gap;
          padding-left: $be-mention-popup-item-padding-left;
          padding-right: $be-blockaction-item-padding-right;
          .e-action-icon-info {
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .e-action-item-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-grow: 1;
          }
          .e-action-icon {
            font-size: $be-ctmenu-icon-font-size;
            line-height: $be-ctmenu-icon-line-height;
          }
          .e-action-item-label {
            font-size: $be-ctmenu-text-font-size;
            line-height: $be-ctmenu-text-line-height;
          }
          .e-action-item-shortcut {
            font-size: $be-ctmenu-shortcut-font-size;
            line-height: $be-ctmenu-shortcut-line-height;
          }
        }
      }
    }

    /* ======== Blazor specific BlockAction menu popup styles ======== */
    .e-menu-container ul {
      width: 100%;
    }
  }

  /* ======== Slash Command styles ======== */
  .e-blockeditor-command-menu.e-popup {
    &.e-mention {
      margin-top: $be-mention-margin-top;
    }
    .e-command-mention-item-template {
      display: flex;
      min-height: 32px;
      align-items: center;
      gap: $be-ctmenu-content-gap;
      padding-left: $be-mention-popup-item-padding-left;
      .e-command-icon-info {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .e-command-icon {
        font-size: $be-ctmenu-icon-font-size;
        line-height: $be-ctmenu-icon-line-height;
      }
      .e-command-title {
        font-size: $be-ctmenu-text-font-size;
        line-height: $be-ctmenu-text-line-height;
      }
      .e-command-shortcut {
        font-size: $be-ctmenu-shortcut-font-size;
        line-height: $be-ctmenu-shortcut-line-height;
      }
    }

    .e-command-item-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-grow: 1;
    }

    .e-dropdownbase .e-list-group-item,
    .e-fixed-head {
      padding-left: $be-mention-popup-header-padding;
    }
  
    &.e-rtl {
      .e-dropdownbase .e-list-group-item,
      .e-fixed-head {
        padding-right: $be-mention-popup-header-padding;
        padding-left: $be-fixed-head-padding-left;
      }
    }

    /* ======== Blazor specific command menu popup styles ======== */
    .e-dropdownbase.e-dd-group .e-list-item {
      padding-left: $be-dropdownbase-list-padding-left;
    }

    /* ======== Inline toolbar Transform item popup styles ======== */
    .e-transform-item-template {
      display: flex;
      align-items: center;
      gap: 5px;
      .e-transform-icon-info {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .e-transform-item-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-grow: 1;
    }
  }

  /* Context menu styles */
  .e-blockeditor-contextmenu ul {
    width: 200px;
    &.e-contextmenu {
      padding: $be-mention-popup-padding;
    }
    .e-ctmenu-item-template {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: $be-ctmenu-item-template-height;
    }

    .e-ctmenu-content {
      display: flex;
      align-items: center;
      gap: $be-ctmenu-content-gap;
    }
    .e-ctmenu-icon {
      font-size: $be-ctmenu-icon-font-size;
      line-height: $be-ctmenu-icon-line-height;
    }
    .e-ctmenu-text {
      font-size: $be-ctmenu-text-font-size;
      line-height: $be-ctmenu-text-line-height;
    }
    .e-ctmenu-shortcut {
      font-size: $be-ctmenu-shortcut-font-size;
      line-height: $be-ctmenu-shortcut-line-height;
    }
  }

  /* ======== Inline Toolbar styles ======== */
  .e-blockeditor-inline-toolbar-popup {
    &.e-be-inline-tlbr-hide {
      display: block;
      visibility: hidden;
      width: auto;
    }
    max-width: 75%;
    border-radius: $be-inline-toolbar-border-radius;
    .e-toolbar-item {
      .e-inline-color-icon,
      .e-inline-bgColor-icon {
        font-family: 'e-icons';
        font-size: $be-inline-bgColor-icon-size;
      }

      .e-toolbar-color-dropdown .e-icons.e-btn-icon,
      .e-toolbar-bgcolor-dropdown .e-icons.e-btn-icon {
        font-size: $be-toolbar-bgcolor-dropdown-size;
      }

      /* ======== Blazor specific Toolbar styles ======== */
      .e-toolbar-color-dropdown,
      .e-toolbar-bgcolor-dropdown {
        &.e-btn.e-icon-btn .e-btn-icon {
          line-height: $be-toolbar-btn-icon-line-height;
        }

        &.e-btn .e-btn-icon.e-icon-left {
          margin-left: $be-toolbar-icon-left-margin-left;
          margin-right: $be-toolbar-icon-left-margin-right;
          width: unset;
        }
      }
    }

    /* ======== Blazor specific Toolbar styles ======== */
    .e-toolbar {
      .e-item-first-child {
        margin-left: $be-toolbar-first-child-margin-left;
      }
      &.e-rtl .e-item-first-child {
        margin-left: $be-rtl-toolbar-first-child-margin-left;
        margin-right: $be-rtl-toolbar-first-child-margin-right;
      }
    }

    .e-blockeditor-inline-toolbar.e-toolbar {
      min-height: auto;
      .e-toolbar-items {
        min-width: auto;
        margin: $be-inline-toolbar-items-margin;
        .e-toolbar-item {
          margin: 0;
          min-height: auto;
          padding: $be-inline-toolbar-item-padding;
        }
      }
      .e-toolbar-transform-dropdown {
        gap: 4px;
      }
    }
    .e-colorpicker-wrapper .e-split-btn-wrapper {
      .e-dropdown-btn{
        @if $theme-name == 'tailwind' {
          padding-left: 2px;
          padding-right: 2px;
        }
      }
      .e-split-colorpicker {
        .e-selected-color {
          background: none;
          display: block;
          margin-top: $be-color-picker-margin-top;
          width: $be-color-picker-width;
          height: $be-color-picker-height;
          .e-split-preview {
            height: 3px;
            bottom: 0;
            top: unset;
          }
        }
        &::before {
          font-family: 'e-icons';
        }
      }
    }
  }

  /* Link Popup styles */
  .e-blockeditor-link-dialog {
    .e-be-link-content {
      display: flex;
      flex-direction: column;
      gap: $be-link-content-gap;
    }

    .e-footer-content .e-be-link-footer {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: $be-link-footer-gap;
      .e-btn {
        margin-left: $be-link-footer-btn-margin-left;
        margin-right: $be-link-footer-btn-margin-right;
      }
    }
  }

  /* User and label mention styles */
  .e-blockeditor-mention-menu.e-popup {
    .e-user-mention-item-template,
    .e-label-mention-item-template {
      display: flex;
      align-items: center;
      gap: $be-label-mention-item-gap;
    }
    .e-user-mention-item-template {
      padding: $be-user-mention-item-padding;
    }
    .e-label-mention-item-template {
      padding: $be-label-mention-item-padding;
    }
    .em-avatar {
      width: $be-mention-avatar-width;
      height: $be-mention-avatar-height;
      font-size: $be-ctmenu-text-font-size;
      line-height: $be-ctmenu-text-line-height;
      border-radius: $be-popup-em-avatar-border-radius;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      .em-img {
        width: 100%;
        height: $be-popup-em-img-height;
        object-fit: cover;
        border-radius: $be-popup-em-img-border-radius;
      }
    }

    &.e-blockeditor-label-menu {
      .em-avatar {
        width: $be-label-avatar-width;
        height: $be-label-avatar-height;
      }
    }

    .em-initial {
      user-select: none;
    }

    .em-content {
      display: flex;
      align-items: center;
      gap: $be-popup-em-content-gap;
      .em-text {
        font-size: $be-ctmenu-text-font-size;
        line-height: $be-ctmenu-text-line-height;
      }
      .em-icon {
        font-size: $be-ctmenu-icon-font-size;
        line-height: $be-ctmenu-icon-line-height;
      }
    }
  }

  /* Image upload popup styles */
  .e-image-upload-popup {
    border-radius: $be-image-upload-popup-radius;
    &.e-image-popup-hide {
      display: block;
      visibility: hidden;
    }
    .e-tab .e-content {
      padding: $be-image-upload-popup-tab-content-padding;
    }
    .e-embed-actions {
      padding-top: $be-embed-btn-padding-top;
      display: flex;
      justify-content: center;
    }
  }

  /* shortcut direction */
  .e-ctmenu-shortcut,
  .e-action-item-shortcut,
  .e-command-shortcut {
    direction: ltr;
  }

  /* ======== Color Picker Popup Styles ======== */
  .e-dropdown-popup:has(.e-be-color-picker) {
    margin-top: $be-color-picker-margin-top;
  }

  /* Blazor specific styles for ddb popup */
  .e-blockeditor-codeblock-dropdown.e-dropdown-popup ul {
    max-height: 300px;
    overflow: auto;
  }
}