/*
 * 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-mouse-mask .ghost-tab {
    position: fixed;
  }

  .treb-spreadsheet-footer {

    grid-area: 3/1/4/2;

    align-items: center;

    .treb-spreadsheet-tab-container {
      align-self: flex-start;
      overflow: hidden;
      height: 2.2em;
    }

    &,
    .treb-spreadsheet-tabs {
      display: flex;
      flex-direction: row;
      z-index: 2;
      max-width: 100%;
      height: 2.2em;
      color: var(--treb-ui-color, inherit);
      list-style-type: none;
      padding-inline-start: 0;
    }
  
    .treb-spreadsheet-tabs {
      height: auto;
      margin-block-start: 0;
      margin: 0;
      overflow-x: scroll;
      overflow-y: hidden;
      
      scrollbar-width: none; /* For Firefox */
      &::-webkit-scrollbar {
        display: none;
      }

    }

    &[hidden] {
      display: none;
    }

    & .treb-spreadsheet-tabs>li {
      display: inline-block;
      position: relative;
      margin: 0;
    }

    & .treb-spreadsheet-tabs>li,
    & .treb-add-tab,
    & .treb-delete-tab {

      font-size: inherit;
      padding: .25em .75em;
      padding: 0 .75em;
      height: 100%;
      overflow: hidden;

      color: var(--treb-tab-bar-tab-color, var(--treb-ui-color, #fff));

      cursor: default;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      border: 1px solid var(--treb-tab-bar-tab-border-color, var(--treb-ui-border-color, #ccc));
      border-top-width: 0px;
      z-index: 1;

      // the negative margins here (plus some correction below) makes the
      // active tab overlap just a little bit, very tab like. we have to
      // stop at the last one or it causes problems for the containing node
      // (forces a 2-pixel scroll which is infuriating)

      margin-right: -2px;

      &:active, &:focus {
        z-index: 3;
      }

    }

    & .treb-spreadsheet-tabs>li {
      height: 2.2em;
      overflow: visible;
      overflow-x: visible;

      &:last-of-type {
        margin-right: 0;
      }

    }
    
    & .treb-add-tab {
      margin-left: -1px;
    }

    /** don't overflow/ellipsis the add tab button */

    /**
     * for ellipsis to work, it seems like it has to be inside
     * a span in the tab. since we are not using it atm I removed
     * that span, but if we want ellpisis it will need to come back.
     */

     & .treb-spreadsheet-tabs>li {

      white-space: nowrap;
      // overflow-x: hidden;

      &[selected] {
        z-index: 2;
      }

    }

    & .treb-scale-control {
      font-size: inherit;
      height: 2.2em;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 5em;

      & .treb-scale-input {
        font-size: inherit;
        font-family: inherit;
        width: 4em;
        text-align: center;
        border: 1px solid transparent;
        transition: border-color .25s ease, background-color .25s ease;
        border-radius: 2px;
        color: inherit;
        background: transparent;
        padding: initial;
      }

      & .treb-slider-container {
        position: absolute;

        border: 1px solid var(--treb-scale-slider-border-color, var(--treb-ui-border-color, #ccc));
        background: var(--treb-scale-slider-background, #fff);
        accent-color: var(--treb-scale-slider-accent-color, undefined);

        width: 10em;
        height: 4em;
        top: 0em;
        left: .5em;
        transform-origin: left top;
        transform: rotate(-90deg);
        z-index: $z-index-scale-popup;
        opacity: 0;
        transition: opacity .25s ease;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        pointer-events: none;
      }

      &:hover .treb-scale-input,
      .treb-scale-input:focus {
        border-color: var(--treb-ui-border-color, #ccc);
      }

      .treb-slider-container>input[type=range] {
        width: 8.5em;
      }

      & .treb-scale-input:focus+.treb-slider-container,
      & .treb-slider-container:focus-within,
      &:hover .treb-slider-container {
        opacity: .85;
        pointer-events: initial;
      }

    }

    & .treb-delete-tab {

      // was a div, now a button, so needs some adjustments
      // why double focus?

      border: none;
      background: transparent;
      color: currentColor;

      font-size: inherit;
      padding: .25em .75em;
      cursor: default;
      display: inline-flex;
      align-items: center;
      flex-direction: row;

      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;

      /* border: 1px solid #ccc; */
      border-top-width: 0px;
      z-index: 1;
      margin-right: -2px;
      /* margin-right: 1em; */

      min-width: 2.5em; 

      svg {
        width: 1em;
        height: 1em;
        opacity: .75;
        pointer-events: none;
        transition: opacity .125s ease-in-out;
      }

      &:hover svg {
        opacity: .75;
      }

      path {
        stroke: currentColor;
        stroke-width: 1.5px;
        stroke-linecap: round;
      }

      &:active, &:focus {
        z-index: 3;
      }

    }

    .treb-stats-panel {

      flex: 1 1;

      text-align: end;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      // > * + * {
      >* {
        margin-left: .5em;
      }

      .treb-stats-value {
        border: 1px solid var(--treb-stats-value-border-color, var(--treb-ui-border-color, #ddd));
        background: var(--treb-stats-value-background, #f8f8ff);
        padding: 0 .3em;
        border-radius: 3px;
      }
    }


  }

}