/*
 * 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
 * 
 */

.treb-main.treb-main {

    .treb-formula-bar {

      grid-area: 1/1/2/2;
      
      display: flex;
      flex-direction: row;
      text-align: left;
      gap: .5em;



      padding: 0px 2px 12px 2px; // FIXME: use ems?

      max-width: 100%;
      overflow-x: hidden;

      &[hidden] {
        display: none;
      }

      /** label for selection address */
      .treb-address-label {

        width: 95px;
        min-width: 95px;

        min-height: 1.5em;
        height: 1.75em;
        border: 1px solid var(--treb-formula-bar-border-color, var(--treb-ui-border-color, #ccc));
        border-radius: 2px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 3px;

        // margin-right: 6px;

        &>div {
          outline: none;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .treb-insert-function-button {
        min-height: 1.5em;
        height: 1.75em;
        border: 1px solid var(--treb-formula-bar-border-color, var(--treb-ui-border-color, #ccc));
        border-radius: 2px;
        background: transparent;

        &[hidden] {
          display: none;
        }

      }

      /** expand formula box -- caret/arrow */
      .expand-button {
        background: transparent;
        border: 0;
        border-radius: 2px;
        margin-left: 2px;
        padding: 1px;
        outline: none;
        height: 1.75em;

        &::after {
          content: ' ';
          border: 5px solid transparent;
          position: relative;
          display: inline-block;
          border-top-color: #999;
          padding: 0;
          margin: 0;
          top: -6px;
          transition: transform .15s ease;
        }
      }

      &[expanded] {
        .expand-button::after {
          transform: rotate(180deg) translateY(6px);
        }
      }

      .treb-editor-container {
        border: 1px solid var(--treb-formula-bar-border-color, var(--treb-ui-border-color, #ccc));
        
        border-radius: 2px;
        flex-grow: 1;

        height: 1.75em;

        display: flex;
        min-width: 0px;
        flex-direction: column;
        justify-content: center;

        & > .treb-editor-shadow {
          opacity: .4;
        }

      }

      &[expanded] {
        .treb-editor-container {
          transition: height .1s ease-in-out;
          height: 4.5em;

          &>div {
            overflow-y: auto;
          }
        }
      }

      .treb-editor-container>div {
        width: 100%;
        margin: 2px;
        outline: none;
        overflow-y: hidden;
        overflow-x: hidden;

        white-space: pre-wrap;

        /** 
         * 1.35 is better on safari, seems like a wash on windows.
         * can we browser-limit this? (...)
         */
        line-height: 1.35;
        /* normal; */

        flex-grow: 1;
        /* keeps content at the top */
        min-height: 1em;



        /* I don't like this, let's figure out a better way w/ wrapping */

        /**
         * FIXME: we're using this for a single-line formula, but
         * it needs to come out for multiline (if we do that).
         */

        /*
        white-space: nowrap;
        text-overflow: ellipsis;

        &:focus {
          text-overflow: clip;
        }
        */

      }

      /* * f(x) button, optional * /
      .formula-button {
        border: 1px solid #ccc;
        border-radius: 2px;
        margin-left: 6px;
        height: 1.75em;
        overflow: hidden;
        white-space: nowrap;

        .text-1 {
          font-style: italic;

          &:after {
            content: 'f';
          }

          padding-right: .1em;
        }

        .text-2 {
          font-size: .7em;

          &:after {
            content: '(x)';
          }
        }

      }
      */


    }

}