@use 'variables' as *;
@include export-module('headless-editor-layout') {

  /* ======== Main Editor ======== */
  .e-headless-editor {
    font-family: $he-font-family;
    font-size: $he-font-size;
    font-weight: $he-font-weight;

    /* Use a unitless value so the line-height scales proportionally with each element's font size. */
    line-height: 1.428571;
    overflow: auto;
    overflow-x: hidden;
    outline: none;
    > :first-child {
      outline: none;
      position: relative;
      word-wrap: break-word;
      white-space: pre-wrap;
      white-space: break-spaces;
      tab-size: 4;
      padding: 0 10px;
    }

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

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

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

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

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

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

    blockquote {
      font-size: inherit;
      border-left-width: $he-blockquote-left-width;
      border-left-style: solid;
      padding: 0 0 0 $he-blockquote-text-padding;
      margin: $he-blockquote-margin;
    }

    /* Task List */
    ul[data-type = 'taskList'] {
      list-style: none;
      margin-left: 0;
      padding: 0;
      > li {
        flex-direction: row;
        align-items: flex-start;
        display: flex;
        > label {
          padding-top: $he-checklist-padding-top;
          padding-right: $he-checklist-padding-right;
          position: relative;
          input {
            width: $he-checkbox-width;
            height: $he-checkbox-height;
          }
        }

        div {
          flex: 1 1 auto;
          min-width: 0;
        }
      }
    }

    /* Callout */
    [data-type = 'callout'] {
      display: flex;
      align-items: center;
      gap: $he-callout-icon-gap;
      padding: $he-callout-padding;
      border-radius: 6px;
      margin: 8px 0;

      .e-callout-icon {
        flex: 0 0 auto;
        cursor: default;
        user-select: none;
        padding: unset;
        border: none;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: flex-start;
        width: $he-callout-icon-width;
        height: $he-callout-icon-height;
        padding-top: $he-callout-icon-padding-top;

        svg {
          width: $he-callout-icon-width;
          height: $he-callout-icon-height;
        }
      }

      .e-callout-content {
        flex: 1;
        min-width: 0;

        > *:first-child {
          margin-top: 0;
        }

        > *:last-child {
          margin-bottom: 0;
        }
      }
    }

    /* collapsible */
    [data-type = 'collapsible'] {
      margin: 8px 0;
      .e-collapsible-body-content {
        padding-left: calc($he-collapsible-header-gap + $he-toggle-icon-width);
      }
    }
    [data-type = 'collapsible'][data-collapsed = 'true'] .e-collapsible-body-content {
      display: none;
    }
    [data-role = 'collapsible-header'] {
      display: flex;
      align-items: center;
      gap: $he-collapsible-header-gap;

      /* Collapsible toggle button */
      .e-toggle-btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: $he-toggle-icon-width;
        height: $he-toggle-icon-height;
        padding: 0;
        border-radius: 4px;
        font: inherit;
        cursor: pointer;
        user-select: none;

        svg {
          width: $he-toggle-icon-width;
          height: $he-toggle-icon-height;
        }
      }

      .e-collapsible-header-content {
        flex: 1;
        > * {
          margin: 0;
        }
      }
    }

    /* List Block Styles */
    ul,
    ol {
      margin: unset;
      padding-left: 21px;
    }

    li {
      margin: unset;
      position: relative;
    }

    /* Prosemirror dynamic styles */
    li.ProseMirror-selectednode {
      outline: none;
    }

    li.ProseMirror-selectednode::after {
      content: '';
      position: absolute;
      left: -32px;
      right: -2px;
      top: -2px;
      bottom: -2px;
      pointer-events: none;
    }

    a {
      text-decoration: none;
      user-select: auto;
      cursor: pointer;

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

    /* Inline code */
    code {
      &:not(pre *) {
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        padding: $he-inline-code-padding;
        border-radius: $he-inline-code-border-radius;
        white-space: pre-wrap;
      }
    }

    /* Code Block Styles */
    .e-code-block {
      border-radius: $he-code-block-border-radius;
      overflow: hidden;
      margin: 8px 0;

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

    /* ======== Divider Blocks Level styles ======== */
    hr[contenteditable = 'false'] {
      margin-block: $he-divider-margin-block;
      &:hover,
      &.ProseMirror-selectednode {
        margin-left: 7px;
      }
    }

    /* Table Styles */
    .tableWrapper {
      overflow-x: auto;
      margin: 12px 0;
      table {
        border-collapse: collapse;
        table-layout: fixed;
        width: 100%;
        overflow: hidden;

        td,
        th {
          min-width: 60px;
          box-sizing: border-box;
          vertical-align: top;
          position: relative;
          text-align: left;
        }

        th {
          height: $he-table-heading-height;
          padding: $he-table-heading-padding;
          font-weight: $he-table-heading-font-weight;
          font-size: $he-table-heading-font-size;
          line-height: $he-table-heading-line-height;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          &:focus,
          &:focus-within {
            text-overflow: clip;
          }
        }

        td {
          height: $he-table-col-height;
          padding: $he-table-col-padding;
          font-weight: $he-table-col-font-weight;
          font-size: $he-table-col-font-size;
          line-height: $he-table-col-line-height;
        }

        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: 0;
          top: 0;
          bottom: 0;
          width: 2px;
          z-index: 20;
          pointer-events: none;
        }
      }
    }

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

    /* ======== Placeholder Styles ======== */
    .e-placeholder-is-empty::before {
      content: attr(data-placeholder);
      float: left;
      height: 0;
      pointer-events: none;
    }

    /* Block Image Styles */
    /* Resizable NodeView */
    .e-resizable-wrapper {
      &.ProseMirror-selectednode {
        outline: none;
      }
      position: relative;
      display: inline-block;
      overflow: visible;
      line-height: 0; /* Prevents extra space around inline elements */

      /* Inline image text wrapping */
      &.e-img-wrap-left {
        float: left;
        margin-right: 16px;
        margin-bottom: 8px;
      }

      &.e-img-wrap-right {
        float: right;
        margin-left: 16px;
        margin-bottom: 8px;
      }

      /* Inline image alignment */
      &.e-img-align-left {
        display: block;
        width: fit-content;
        margin-left: 0;
        margin-right: 0;
      }

      &.e-img-align-center {
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
      }

      &.e-img-align-right {
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: 0;
      }

      .e-resizable-handle {
        position: absolute;
        z-index: 9999;
        width: 10px;
        height: 10px;
        background: $he-resizable-handle-bg-color;
        border: 1px solid $he-resizable-handle-border-color;
        border-radius: 1px;
        box-sizing: border-box;
        user-select: none;
        touch-action: none;

        /* Ensure handles are never clipped by parent overflow */
        pointer-events: auto;

        /* Corner handles: positioned at -5px so handle center aligns with image corner */
        &[data-resize-handle = 'top-left'] {
          top: -5px;
          left: -5px;
          cursor: nwse-resize;
        }

        &[data-resize-handle = 'top-right'] {
          top: -5px;
          right: -5px;
          cursor: nesw-resize;
        }

        &[data-resize-handle = 'bottom-left'] {
          bottom: -5px;
          left: -5px;
          cursor: nesw-resize;
        }

        &[data-resize-handle = 'bottom-right'] {
          right: -5px;
          bottom: -5px;
          cursor: nwse-resize;
        }

        /* Edge handles: centered on each edge */
        &[data-resize-handle = 'top'],
        &[data-resize-handle = 'bottom'] {
          left: 50%;
          transform: translateX(-50%);
        }

        &[data-resize-handle = 'top'] {
          top: -5px;
          cursor: ns-resize;
        }

        &[data-resize-handle = 'bottom'] {
          bottom: -5px;
          cursor: ns-resize;
        }

        &[data-resize-handle = 'left'],
        &[data-resize-handle = 'right'] {
          top: 50%;
          transform: translateY(-50%);
        }

        &[data-resize-handle = 'left'] {
          left: -5px;
          cursor: ew-resize;
        }

        &[data-resize-handle = 'right'] {
          right: -5px;
          cursor: ew-resize;
        }
      }
    }
    .e-resizable-wrapper:has(> img.e-img-inline),
    img.e-img-inline {
      &.e-img-align-left,
      &.e-img-align-center,
      &.e-img-align-right {
        display: block;
        width: fit-content;
      }
    }

    /* Shared image element styles */
    .e-img-core-element {
      max-width: 100%;
      height: auto;
      display: inline-block;
      vertical-align: middle;
    }

    /* Figure Styles */
    .e-img-figure {
      display: block;
      width: fit-content;
      max-width: 100%;
      margin: 14px 0;
      clear: both;
      text-align: left;
      &:has(> .e-resizable-wrapper.e-img-align-center),
      &:has(> img.e-img-align-center) {
        margin-left: auto;
        margin-right: auto;
      }
      &:has(> .e-resizable-wrapper.e-img-align-right),
      &:has(> img.e-img-align-right) {
        margin-left: auto;
        margin-right: 0;
      }

      /* Custom UI Slot style (For upload status, badges, etc) */
      .e-img-ui-slot {
        position: absolute;
        z-index: 5;
        pointer-events: none;

        &.e-img-ui-top-left {
          top: 8px;
          left: 8px;
        }
        &.e-img-ui-top-center {
          top: 8px;
          left: 50%;
          transform: translateX(-50%);
        }
        &.e-img-ui-top-right {
          top: 8px;
          right: 8px;
        }
        &.e-img-ui-center-left {
          top: 50%;
          left: 8px;
          transform: translateY(-50%);
        }
        &.e-img-ui-center {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        &.e-img-ui-center-right {
          top: 50%;
          right: 8px;
          transform: translateY(-50%);
        }
        &.e-img-ui-bottom-left {
          bottom: 8px;
          left: 8px;
        }
        &.e-img-ui-bottom-center {
          bottom: 8px;
          left: 50%;
          transform: translateX(-50%);
        }
        &.e-img-ui-bottom-right {
          bottom: 8px;
          right: 8px;
        }
      }

      /* Image-owned wrapping for current block and captioned markup. */
      &:has(> img.e-img-wrap-left),
      &:has(> .e-resizable-wrapper.e-img-wrap-left) {
        float: left;
        width: fit-content;
        max-width: 100%;
        clear: none;
        margin-right: 20px;
        margin-bottom: 12px;
      }
      &:has(> img.e-img-wrap-right),
      &:has(> .e-resizable-wrapper.e-img-wrap-right) {
        float: right;
        width: auto;
        width: fit-content;
        max-width: 100%;
        clear: none;
        margin-left: 20px;
        margin-bottom: 12px;
      }

      > figcaption.e-img-figcaption {
        display: block;
        width: auto;
        clear: none;
        text-align: center;
      }

      > .e-resizable-wrapper {
        .e-img-wrap-left,
        .e-img-wrap-right {
          float: none;
          margin-left: 0;
          margin-right: 0;
        }
      }
    }

    /* Base inline image styles */
    .e-img-inline {
      display: inline-block;
      vertical-align: middle;
      margin: 0 4px;
      max-width: 100%;
      height: auto;

      &.e-img-wrap-left {
        float: left;
        margin-right: 16px;
        margin-bottom: 8px;
      }

      &.e-img-wrap-right {
        float: right;
        margin-left: 16px;
        margin-bottom: 8px;
      }
    }

    /* Protect against generic img rules */
    img.ProseMirror-separator {
      display: inline;
      border: none;
      margin: 0;
      padding: 0;
      width: 1px;
      height: 1px;
      overflow: hidden;
      vertical-align: middle;
    }

    .ProseMirror [draggable][contenteditable = 'false'] {
      user-select: text;
    }

    /* Clear floated image layouts */
    .ProseMirror-content::after {
      content: '';
      display: table;
      clear: both;
    }

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

      /* Task List */
      ul[data-type = 'taskList'] {
        padding-left: unset;
        padding-right: unset;
        li {
          > label {
            padding-right: unset;
            padding-left: $he-checklist-padding-right;
          }
        }
      }

      blockquote {
        border-left-width: unset;
        border-left-style: unset;
        border-right-width: $he-blockquote-left-width;
        border-right-style: solid;
        padding: 0 $he-blockquote-text-padding 0 0;
      }

      /* collapsible */
      [data-type = 'collapsible'] {
        .e-collapsible-body-content {
          padding-left: unset;
          padding-right: calc($he-collapsible-header-gap + $he-toggle-icon-width);
        }
      }

      /* List Block Styles */
      ul,
      ol {
        padding-left: unset;
        padding-right: 21px;
      }
    }
  }
}