/*
 * This file is part of TREB.
 *
 * TREB is free software: you can redistribute it and/or modify it under the 
 * terms of the GNU General Public License as published by the Free Software 
 * Foundation, either version 3 of the License, or (at your option) any 
 * later version.
 *
 * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
 * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
 * details.
 *
 * You should have received a copy of the GNU General Public License along 
 * with TREB. If not, see <https://www.gnu.org/licenses/>. 
 *
 * Copyright 2022-2026 trebco, llc. 
 * info@treb.app
 * 
 */

@use 'z-index.scss' as *;
@use 'defaults.scss' as *;

.treb-main.treb-main {

  .treb-grid {

    // rewrite of the overlay structure. much simpler. 
    // 
    // the aim is to bottom-justify the editor in a cell, and then 
    // left/right/center justify based on cell style. all that seems
    // to work with this new structure, and we were able to drop the
    // extra node.
    //
    // there is one layout issue in firefox having to do with the caret
    // in an empty contenteditable cell. we're adding a zero-width space
    // in a ::before pseudoelement, which seems to fix. this should only
    // be necessary when the edit node is empty, but I can't get firefox
    // to do :empty::before (could be I have the syntax wrong).

    // going to bring back the extra node, so we can have a background
    // that crosses the selection box...

    .treb-overlay-container {

      padding: 0;
      margin: 0;

      /* gets positioned to the rect */
      position: absolute;

      /* gets set on edit, along with pointer-events */
      opacity: 0;

      /* probably unecessary */
      outline: none;

      z-index: $z-index-cell-editor;

      &.align-right .treb-overlay-inset {
        right: 0px;
        text-align: right;
        padding-right: 3px;
      }

      &.align-center .treb-overlay-inset {
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
      }


    }

    .treb-overlay-inset {

      padding: 0;
      margin: 0;
      padding: 0 4px;

      position: absolute;
      height: 100%;
      min-width: 100%;

      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .treb-overlay-editor {
      outline: none;
      white-space: nowrap;
      position: relative;
      // -webkit-user-modify: read-write;

      // this fixes the firefox issue (firefox removing spaces), but 
      // I'm not sure if it will cause other problems. for the overlay
      // editor we're trapping CR, so it shouldn't be a typing problem --
      // it might be an issue on paste though. also need to check safari
      // with pre here.

      white-space: pre; 

    }

    /** fix for firefox layout bug */
    .treb-overlay-editor.firefox::before {
      content: '\200B';
    }

  }

}