@use 'ej2-base/styles/common/mixin' as *;
@include export-module('blockeditor-bigger') {
  .e-bigger.e-blockeditor,
  .e-bigger .e-blockeditor {
    .e-block-container-wrapper {
      font-size: $be-font-size-bigger;
      font-weight: $be-font-weight-bigger;
      line-height: $be-line-height-bigger;
    }

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

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

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

        /* Checklist Block */
        &[data-block-type = 'Checklist'] {
          .e-checkmark-container {
            height: $be-checkbox-height-bigger;
            width: $be-checkbox-width-bigger;
          }
        }
      }

      /* Quote Block */
      &.e-quote-block blockquote {
        border-left-width: $be-blockquote-left-width-bigger;
        padding-left: $be-blockquote-text-padding-bigger;
      }

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

        .e-callout-icon {
          height: $be-callout-icon-height-bigger;
          width: $be-callout-icon-width-bigger;
        }
      }

      /* Toggle Block */
      &.e-toggle-block {

        .e-toggle-icon {
          height: $be-toggle-icon-height-bigger;
          width: $be-toggle-icon-width-bigger;
          margin-right: $be-toggle-icon-margin-bigger;
        }
      }

      /* User and label mention Chip styles */
      .e-user-chip {
        height: $be-user-mention-chip-height-bigger;
        padding: 2px;
        align-items: baseline;
        .em-avatar {
          height: $be-user-mention-avatar-height-bigger;
          width: $be-user-mention-avatar-width-bigger;
          font-size: $be-user-mention-chip-font-size-bigger;
          line-height: $be-user-mention-chip-line-height-bigger;
          display: inline-block;
        }
        .em-text {
          font-size: $be-user-mention-chip-font-size-bigger;
          line-height: $be-user-mention-chip-line-height-bigger;
        }
      }

      .e-label-chip {
        height: 26px;
        padding: 2px 4px;
        font-size: $be-label-mention-chip-font-size-bigger;
        line-height: $be-label-mention-chip-line-height-bigger;
      }

      /* Inline content type styles */
      .e-block-content {

        /* Inline code */
        .e-be-inline-code {
          font-size: $be-inline-code-font-size-bigger;
          line-height: $be-inline-code-line-height-bigger;
          padding: $be-inline-code-padding-bigger;
        }
      }
    }

    /* ======== Code Block Styles ======== */
    .e-code-block-toolbar {
      padding: $be-code-block-toolbar-padding-bigger;
      min-height: $be-code-toolbar-height-bigger;
    }

    .e-code-block-languages {
      padding: $be-code-block-lang-padding-bigger;
      width: 248px;
      height: $be-code-lang-height-bigger;
    }

    .e-code-block-copy-button {
      padding: $be-code-copy-btn-padding-bigger;
      margin-left: $be-code-block-copy-btn-bigger-margin;
      width: $be-code-copy-btn-width-bigger;
      height: $be-code-copy-btn-height-bigger;
      .e-icons {
        font-size: $be-code-copy-btn-font-size-bigger;
      }
    }

    .e-code-block {
      margin: $be-code-block-bigger-margin;
      padding-left: $be-code-block-bigger-padding-left;
      overflow-x: auto;
      font-size: $be-font-size-bigger;
      line-height: $be-line-height-bigger;
    }

    /* ======== Table Block Styles ======== */
    .e-table-block {
      th {
        height: $be-table-heading-height-bigger;
        padding: $be-table-heading-padding-bigger;
        font-size: $be-table-heading-font-size-bigger;
        line-height: $be-table-heading-line-height-bigger;
      }
      td {
        height: $be-table-col-height-bigger;
        padding: $be-table-col-padding-bigger;
        font-size: $be-table-col-font-size-bigger;
        line-height: $be-table-col-line-height-bigger;
        &:has(.e-block) {
          padding-top: 0;
          padding-bottom: 0;
        }
      }
    }

    /* ======== Image placeholder Styles ======== */
    .e-image-placeholder {
      height: $be-image-placeholder-ele-height-bigger;
      padding: $be-image-placeholder-ele-padding-bigger;
      gap: $be-image-placeholder-text-icon-gap-bigger;

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

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

    .e-block {
      .e-row-action-handle,
      .e-col-action-handle {
        font-size: $be-table-row-col-action-handle-size-bigger;
        line-height: $be-table-action-handle-line-height-bigger;
      }
      .e-row-action-handle {
        width: $be-table-row-gripper-width-bigger;
        left: $be-table-row-gripper-left-bigger;
      }
      .e-col-action-handle {
        height: $be-table-col-gripper-height-bigger;
        top: $be-table-col-gripper-top-bigger;
      }
    }

    /* Image upload popup styles */
    .e-image-upload-popup {
      .e-tab .e-content {
        padding: $be-image-upload-popup-tab-content-padding-bigger;
      }
      .e-embed-actions {
        padding-top: $be-embed-btn-padding-top-bigger;
      }
    }

    .e-image-container .e-badge {
      position: absolute;
      top: $be-image-block-badge-top-bigger;
      right: $be-image-block-badge-right-bigger;
    }
  }

  .e-bigger .e-table-gripper-action-popup {
    .e-icons {
      font-size: $be-table-popup-icon-size-bigger;
      padding: $be-table-popup-icon-padding-bigger;
    }
  }

  /* ======== Floating Icons styles ======== */
  .e-bigger .e-floating-icon {
    width: $be-floating-icon-width-bigger;
    height: $be-floating-icon-height-bigger;
    font-size: $be-floating-icon-font-size-bigger;
    line-height: $be-floating-icon-line-height-bigger;
    font-weight: $be-floating-icon-font-weight-bigger;
  }

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

  /* ======== Block Action styles ======== */
  .e-bigger .e-blockeditor-blockaction-popup,
  .e-bigger.e-blockeditor-blockaction-popup {
    .e-menu-wrapper,
    .e-menu-container {
      padding: $be-mention-popup-padding-bigger;
      ul .e-menu-item {
        height: $be-menu-item-bigger-height;
        line-height: $be-menu-item-bigger-line-height;
        padding: $be-menu-item-bigger-padding;
        .e-blockaction-item-template {
          min-height: 40px;
          padding-left: $be-mention-popup-item-padding-left-bigger;
          .e-action-icon {
            font-size: $be-ctmenu-icon-font-size-bigger;
            line-height: $be-ctmenu-icon-line-height-bigger;
          }
          .e-action-item-label {
            font-size: $be-ctmenu-text-font-size-bigger;
            line-height: $be-ctmenu-text-line-height-bigger;
          }
          .e-action-item-shortcut {
            font-size: $be-ctpupmenu-shortcut-font-size-bigger;
            line-height: $be-ctmenu-shortcut-line-height-bigger;
          }
        }
      }
    }
  }

  /* ======== Slash Command styles ======== */
  .e-bigger .e-blockeditor-command-menu.e-popup,
  .e-bigger.e-blockeditor-command-menu.e-popup {
    .e-command-mention-item-template {
      min-height: 40px;
      padding-left: $be-mention-popup-item-padding-left-bigger;

      .e-command-icon {
        font-size: $be-ctmenu-icon-font-size-bigger;
        line-height: $be-ctmenu-icon-line-height-bigger;
      }
      .e-command-title {
        font-size: $be-ctmenu-text-font-size-bigger;
        line-height: $be-ctmenu-text-line-height-bigger;
      }
      .e-command-shortcut {
        font-size: $be-ctmenu-shortcut-font-size-bigger;
        line-height: $be-ctmenu-shortcut-line-height-bigger;
      }
    }
    .e-dropdownbase .e-list-group-item,
    .e-fixed-head {
      padding-left: $be-mention-popup-header-padding-bigger;
    }
  
    &.e-rtl {
      .e-dropdownbase .e-list-group-item,
      .e-fixed-head {
        padding-right: $be-mention-popup-header-padding-bigger;
        padding-left: $be-fixed-head-bigger-padding-left;
      }
    }
  }

  /* Context menu styles */
  .e-bigger .e-blockeditor-contextmenu ul,
  .e-bigger.e-blockeditor-contextmenu ul {
    width: 220px;
    &.e-contextmenu {
      padding: $be-mention-popup-padding-bigger;
    }
    .e-ctmenu-icon {
      font-size: $be-ctmenu-icon-font-size-bigger;
      line-height: $be-ctmenu-icon-line-height-bigger;
    }
    .e-ctmenu-text {
      font-size: $be-ctmenu-text-font-size-bigger;
      line-height: $be-ctmenu-text-line-height-bigger;
    }
    .e-ctmenu-shortcut {
      font-size: $be-ctmenu-shortcut-font-size-bigger;
      line-height: $be-ctmenu-shortcut-line-height-bigger;
    }
  }

  /* ======== Inline Toolbar styles ======== */
  .e-bigger .e-blockeditor-inline-toolbar-popup,
  .e-bigger.e-blockeditor-inline-toolbar-popup {
    .e-toolbar-item {
      .e-inline-color-icon,
      .e-inline-bgColor-icon {
        font-size: $be-inline-bgColor-icon-bigger-size;
      }

      .e-toolbar-color-dropdown .e-icons.e-btn-icon,
      .e-toolbar-bgcolor-dropdown .e-icons.e-btn-icon {
        font-size: $be-inline-btn-icon-bigger-size;
      }
    }
    .e-colorpicker-wrapper .e-split-btn-wrapper {
      .e-split-colorpicker {
        .e-selected-color {
          width: $be-color-picker-width;
          height: $be-color-picker-height;
        }
      }
    }

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

  /* User and label mention styles */
  .e-bigger .e-blockeditor-mention-menu.e-popup,
  .e-bigger.e-blockeditor-mention-menu.e-popup {
    .e-user-mention-item-template,
    .e-label-mention-item-template {
      gap: $be-label-mention-item-bigger-gap;
    }
    .e-user-mention-item-template {
      padding: $be-user-mention-item-padding-bigger;
    }
    .e-label-mention-item-template {
      padding: $be-label-mention-item-padding-bigger;
    }
    .em-avatar {
      width: $be-mention-avatar-width-bigger;
      height: $be-mention-avatar-height-bigger;
      font-size: $be-ctmenu-text-font-size-bigger;
      line-height: $be-ctmenu-text-line-height-bigger;
    }

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

    .em-content {
      gap: $be-em-content-bigger-gap;
      .em-text {
        font-size: $be-ctmenu-text-font-size-bigger;
        line-height: $be-ctmenu-text-line-height-bigger;
      }
      .e-icons {
        font-size: $be-ctmenu-icon-font-size-bigger;
        line-height: $be-ctmenu-icon-line-height-bigger;
      }
    }
  }
}