.ProseMirror-tableContainer {
  @apply my-[var(--lineHeight-m)] flex flex-col overflow-x-scroll overscroll-x-contain rounded-lg border bg-white hover:border-gray-300 hover:bg-gray-100;

  .ProseMirror-tableContainer {
    @apply overflow-x-hidden;
  }
}

.ProseMirror-tableHeading {
  @apply sticky left-0 flex w-full justify-between p-2;

  /* Prevent cursor caret flicker when clicking in table header */
  @apply cursor-default caret-transparent;
}

.ProseMirror-tableTitle {
  @apply flex items-center gap-2 py-1 text-sm font-medium text-gray-900 before:btu-icon before:btu-icon-grid-2x2;
}

.ProseMirror-tableSubmenu {
  @apply contents;
}

.ProseMirror .ProseMirror-tableSubmenuList {
  @apply m-0 flex gap-1;

  li {
    @apply list-none;

    &:has(a.open_with) {
      @apply -order-1;
    }

    &:has(a.more_horiz, a.remove) {
      @apply order-1;
    }

    a {
      @apply btu-button btu-button-fill-none btu-button-gray btu-button-xs;

      &[data-icon] {
        @apply btu-button-text-hidden before:btu-icon;

        &.remove {
          @apply btu-button-error;
        }

        &.is-active {
          @apply btu-button-pressed before:btu-icon-ellipsis;
        }

        /* Explicit icon mappings for known table toolbar icons */
        &.more_horiz {
          @apply before:btu-icon-ellipsis;
        }

        &.arrow_upward {
          @apply before:btu-icon-arrow-up;
        }

        &.arrow_downward {
          @apply before:btu-icon-arrow-down;
        }

        &.open_with {
          @apply before:btu-icon-move;
        }

        &.remove {
          @apply before:btu-icon-x;
        }
      }
    }
  }
}

.ProseMirror-tableMenu {
  @apply Dropdown;

  &.is-open {
    @apply Dropdown-is-open;
  }

  .ProseMirror-tableMenuList {
    @apply m-0 list-none;

    > li {
      @apply Dropdown-item;
    }
  }
}

.ProseMirror-table {
  @apply mx-2 mb-2 w-[calc(100%-1rem)] table-auto border-separate border-spacing-0 rounded-lg border;

  tr:not(:last-child) > td {
    @apply border-b;
  }

  td {
    @apply box-border min-w-[64px] overflow-hidden bg-white p-3 text text-gray-900 hover:bg-gray-100;

    &:not(:last-child) {
      @apply border-e;
    }

    .Enhancement-preview,
    .Enhancement {
      @apply overflow-hidden bg-white;
    }

    &.is-selected-cell,
    &.selectedCell {
      @apply isolate border-0 ring-1 ring-primary-600;
    }

    .ProsemirrorEnhancementMenu-container-button:is(
        .arrow_upward,
        .arrow_downward,
        .open_with
      ) {
      @apply hidden;
    }

    .Enhancement.block.readOnly {
      @apply flex flex-wrap items-center overflow-hidden;
    }

    .Enhancement-label {
      @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
    }

    .ProsemirrorEnhancementMenu {
      @apply ml-auto;
    }

    .ProsemirrorEnhancementMenu-container.is-block {
      @apply static;
    }

    .Enhancement-preview,
    .Enhancement-initialBody {
      @apply min-w-0 basis-full;
    }

    .rte2-style-comment {
      .ProseMirror-fullscreen-container & {
        @apply before:pt-0;
      }
    }
  }

  tr:first-child > td:first-child {
    @apply rounded-ss-lg;
  }

  tr:first-child > td:last-child {
    @apply rounded-se-lg;
  }

  tr:last-child > td:first-child {
    @apply rounded-es-lg;
  }

  tr:last-child > td:last-child {
    @apply rounded-ee-lg;
  }
}

.ContentEdit.is-locked .ProseMirror-tableContainer {
  .ProseMirror-table {
    @apply border-gray-200;
  }

  .ProseMirror-tableTitle,
  .ProseMirror-table td {
    @apply text-gray-400;
  }
}
