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

  /* ======== Main Editor ======== */
  .e-headless-editor {
    background: $he-bg-color;
    color: $he-color;

    > :first-child {
      &::selection {
        background: $he-text-selection-bg-color;
      }
    }

    /* Task List */
    ul[data-type = 'taskList'] {
      li {
        > label {
          input {
            &:checked {
              accent-color: $he-checklist-marker-checked-bg-color;
            }
          }
        }
      }
    }

    [data-role = 'collapsible-header'] {
      display: flex;
      align-items: center;
      gap: $he-collapsible-header-gap;

      /* Collapsible toggle button */
      .e-toggle-btn {
        border: none;
        background: none;
        color: none;
        transition: background-color .15s ease, color .15s ease, border-color .15s ease;

        &:focus-visible {
          outline: none;
        }
        &:hover {
          background: $he-toggle-btn-hover;
        }
        &:active {
          background: $he-toggle-btn-pressed;
        }
      }
    }

    blockquote {
      border-left-color: $he-blockquote-border-color;
    }

    /* Callout */
    [data-type = 'callout'] {
      &[data-variant = 'tip'] {
        color: $he-callout-tip-text-color;
        background-color: $he-callout-tip-bg-color;
        @if $theme-name == 'highcontrast' {
          border: 1px solid rgba(26, 26, 26, 1);
        }
        svg path {
          fill: $he-callout-tip-text-color;
        }
      }

      &[data-variant = 'note'] {
        color: $he-callout-note-text-color;
        background-color: $he-callout-note-bg-color;
        @if $theme-name == 'highcontrast' {
          border: 1px solid rgba(255, 217, 57, 1);
        }
        svg path {
          fill: $he-callout-note-text-color;
        }
      }

      &[data-variant = 'info'] {
        color: $he-callout-info-text-color;
        background-color: $he-callout-info-bg-color;
        @if $theme-name == 'highcontrast' {
          border: 1px solid rgba(34, 248, 255, 1);
        }
        svg path {
          fill: $he-callout-info-text-color;
        }
      }

      &[data-variant = 'warning'] {
        color: $he-callout-warning-text-color;
        background-color: $he-callout-warning-bg-color;
        @if $theme-name == 'highcontrast' {
          border: 1px solid rgba(255, 91, 4, 1);
        }
        svg path {
          fill: $he-callout-warning-text-color;
        }
      }

      &[data-variant = 'error'] {
        color: $he-callout-error-text-color;
        background-color: $he-callout-error-bg-color;
        @if $theme-name == 'highcontrast' {
          border: 1px solid rgba(253, 1, 0, 1);
        }
        svg path {
          fill: $he-callout-error-text-color;
        }
      }

      &[data-variant = 'success'] {
        color: $he-callout-success-text-color;
        background-color: $he-callout-success-bg-color;
        @if $theme-name == 'highcontrast' {
          border: 1px solid rgba(117, 249, 76, 1);
        }
        svg path {
          fill: $he-callout-success-text-color;
        }
      }
    }

    a {
      color: $he-link-anchor-color;
    }

    /* Inline code */
    code {
      &:not(pre *) {
        background: $he-inline-code-bg-color;
        color: $he-inline-code-text-color;
      }
    }

    /* ======== Code Block Styles ======== */
    .e-code-block {
      background: $he-code-block-container-bg-color;
      border: $he-code-block-container-border-width solid $he-code-block-container-border-color;

      pre {
        background-color: $he-code-block-container-bg-color;
        color: $he-color;
        code {
          background: transparent;
        }
      }
    }

    /* ======== Divider Blocks Level styles ======== */
    hr[contenteditable = 'false'] {
      border: $he-divider-border solid $he-divider-border-color;
      &:hover {
        outline: 7px solid $he-divider-hover-bg-color;
      }
      &.ProseMirror-selectednode {
        outline: 7px solid $he-divider-selected-bg-color;
      }
    }

    /* ======== Table Block Styles ======== */
    .tableWrapper {
      th,
      td {
        border: $he-table-block-border solid $he-table-border-color;
      }
      th {
        background: $he-table-header-row-bg-color;
        color: $he-table-header-color;
      }
      tr:has(th) {
        background: $he-table-header-row-bg-color;
        color: $he-table-header-color;
      }
      tr:has(td) {
        background: $he-table-body-row-bg-color;
        color: $he-table-body-color;
      }
      tr:hover:not(:has(> th.column-resize-dragging, > td.column-resize-dragging)) {
        background: $he-table-row-hover-bg-color;
        color: $he-table-row-hover-color;
        .selectedCell {
          @if $theme-name == 'fluent2-highcontrast'{
            border-color: rgba(255, 255, 255, 1);
          }
        }
      }
      tr:has(.selectedCell) {
        color: $he-table-row-focus-color;
        @if $theme-name == 'fluent2-highcontrast' {
          color: rgba(255, 255, 255, 1);
        }
      }
      .selectedCell {
        border: $he-cell-focus-outline double $he-table-cell-focus-color;
        background-color: $he-table-col-selected-bg;
        @if $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' {
          border-color: rgba(255, 255, 255, 1);
        }
      }

      /* table row selection */
      tr:not(:has(> th:not(.selectedCell), > td:not(.selectedCell))) {
        background-color: $he-table-col-selected-bg;
      }

      /* border style for row selection */
      tr.e-row-selected td {
        border: 1px double $he-table-row-col-selected-border;
        @if $theme-name == 'fluent2-highcontrast' {
          border-color: rgba(255, 255, 255, 1);
        }
        box-shadow: unset;
      }

      .column-resize-handle {
        background-color: $he-table-row-col-hover-line;
      }
    }

    /* ======== Placeholder Styles ======== */
    .e-placeholder-is-empty::before {
      color: $he-block-placeholder-color;
    }

    /* Resizable NodeView */
    .e-resizable-wrapper {
      .e-resizable-handle {
        background: $he-resizable-handle-bg-color;
        border: 1px solid $he-resizable-handle-border-color;
      }

      /* Selection ring — tight around the image, only visible when node is selected */
      &.is-selected > img {
        outline: 2px solid $he-resizable-wrapper-outline-color;
      }
    }
    
    /* Prosemirror dynamic styles */
    .ProseMirror-hideselection *::selection {
      background: transparent;
    }
    .ProseMirror-hideselection {
      caret-color: transparent;
    }
    .ProseMirror-selectednode {
      outline: 3px solid $he-divider-selected-bg-color;
    }

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

      blockquote {
        border-left-color: unset;
        border-right-color: $he-blockquote-border-color;
      }
    }
  }
}