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


// -----------------------------------------------------------------------------

$button-width: 32px;
$dropdown-button-width: 16px;

$background-color: var(--treb-toolbar-button-background, transparent);
$background-hover: var(--treb-toolbar-hover-button-background, #f3f4f6);
$border-color: var(--treb-toolbar-border-color, var(--treb-ui-border-color, rgb(209, 213, 219)));

$menu-background: var(--treb-toolbar-button-background, #fff);
$menu-border-color: var(--treb-toolbar-border-color, var(--treb-ui-border-color, rgb(209, 213, 219)));
$menu-item-hover-color: var(--treb-toolbar-hover-button-background, #f3f4f6);

$box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .4);
$border-radius: 3px;

$split-font-size: 10px;
$swatch-size: 18px;

.treb-main.treb-main {

  .treb-layout-header {
    
    overflow: hidden;
    position: relative;
    overflow-x: scroll;

    // hide scrollbars
    // FIXME: util class

    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar { 
      display: none;
    }

  }

  .treb-toolbar {

    color: var(--treb-toolbar-color, var(--treb-ui-color, #333));
    font-size: var(--treb-toolbar-font-size, inherit);

    // ----

    display: flex;
    flex-direction: row;
    gap: .5rem;

    & > div {
      display: flex;
      flex-direction: row;
    }

    & > input, & > div > input {
      height: $button-width;
      background-color: $background-color;
      border: 1px solid $border-color;
      text-overflow: ellipsis;
      overflow: hidden;
      padding-left: .5em;
      padding-right: .5em;
    }

    & > .treb-menu > button {
      border-radius: $border-radius;
    }

    & > .group, & > [composite] {

      & > button + button, 
      & > input + button, 
      & > input + .treb-menu > button, 
      & > button + .treb-menu > button,
      & > .treb-menu + button {
        border-left-width: 0px;
      }

      & > button:first-child, & > input:first-child {
        border-top-left-radius: $border-radius;
        border-bottom-left-radius: $border-radius;
      }
  
      & > button:last-child, & > .treb-menu:last-child > button {
        border-top-right-radius: $border-radius;
        border-bottom-right-radius: $border-radius;
      }
  

    }



    & > button, & > div > button, .treb-menu > button, button[data-icon], .treb-icon-buttons > button {

      width: $button-width;
      height: $button-width;
      background-color: $background-color;
      border: 1px solid $border-color;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;

      // removing this transition because it lags when toggling light/dark mode 

      // transition: background-color .1s ease;
      // border-radius: $border-radius;

      &[dropdown] {
        width: $dropdown-button-width;
        &::after {
          box-sizing: content-box;
          content: '';
          position: absolute;
          width: 0px;
          height: 0px;
          border: 5px solid transparent;
          border-top-color: currentColor;
          top: 18px; // FIXME: specify in ems // NO
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      &:hover, &[active] {
        background-color: $background-hover;
      }

      &[data-color-bar]::after {
        content: '';
        box-sizing: border-box;
        position: relative;
        display: block;
        width: 20px;
        height: 6px;
        border: 1px solid $border-color;
        background: var(--treb-color-bar-color, var(--treb-default-color, unset));
      }

      &[data-icon], &[data-command] {
        &::before {
          content: '';
          display: block;
          position: relative;
          background: currentColor;
          width: 20px;
          height: 20px;
          mask-position: center;
          -webkit-mask-position: center;
          mask-repeat: no-repeat;
          -webkit-mask-repeat: no-repeat;
          mask-image: var(--icon);
          -webkit-mask-image: var(--icon);
          mask-size: var(--icon-size, 16px 16px);
          -webkit-mask-size: var(--icon-size, 16px 16px);
        }

        &.treb-font-stack {
          &::before {
            display: none;
          }
        }

      }

    }

    .treb-split {
      display: flex;
      flex-direction: column;
      gap: 0;

      button[data-command] {
        font-size: $split-font-size;
        &::before {
          display: none;
        }
      }

      & > button {
        height: calc($button-width / 2);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      & > button:first-child {
        border-top-left-radius: $border-radius;      
        border-top-right-radius: $border-radius;      
      }

      & > button:last-child {
        border-top: 0;      
        border-bottom-left-radius: $border-radius;      
        border-bottom-right-radius: $border-radius;      
      }

    }

    .treb-font-stack {
      width: 8em;
      align-items: flex-start;
      overflow: hidden;
      &::before {
        display: none;
      }
    }

    .treb-menu {

      // on Safari, we need to make these menus focus targets, so we can 
      // use :focus-within. they will get a tabIndex. we will preferentially 
      // focus on buttons within the menus, but there will be flashes where 
      // focus is visible on the menu itself, so to reduce jitter we remove
      // the outline.

      outline: none;

      // ---

      & > div {

        display: none; 

        margin-top: .5rem;

        flex-direction: column;
        background: $menu-background;
        border: 1px solid $border-color;
        border-radius: $border-radius;
        position: fixed;
        z-index: 20;
        top: 48px;
        box-shadow: $box-shadow;

        button {
          white-space: nowrap;
          background: transparent;
          border: 0;
          text-align: left;
          padding: .4rem 1rem;
          margin: 3px 0;
          transition: background-color .125s ease;

          &:hover {
            background: $background-hover;
          }
      
        }

        &.treb-icon-buttons {
          & > button, & > .treb-menu > button {
            padding: 0;
          }
        }

        & > [separator] {
          background: $border-color;
          height: 1px;
          margin: 2px 0;

        }

      }

      &:focus-within > div, &.visible > div {
        display: flex;
      }

    }

    // ---------------------------------------------------------------------------

    [data-icon=file-menu]{ --icon: var(--icon-file-menu); }
    
    [data-command=justify-left] { --icon: var(--icon-text-align-left); }
    [data-command=justify-right] { --icon: var(--icon-text-align-right); }
    [data-command=justify-center] { --icon: var(--icon-text-align-center); }

    [data-command=indent] { --icon: var(--icon-text-indent); }
    [data-command=outdent] { --icon: var(--icon-text-outdent); }

    [data-command=align-top] { --icon: var(--icon-text-align-top); }
    [data-command=align-middle] { --icon: var(--icon-text-align-middle); }
    [data-command=align-bottom] { --icon: var(--icon-text-align-bottom); }
    [data-command=merge-cells] { --icon: var(--icon-merge-cells); }
    [data-command=unmerge-cells] { --icon: var(--icon-unmerge-cells); }

    [data-command=fill-color] { --icon: var(--icon-fill-color); }
    [data-command=text-color] { --icon: var(--icon-text-color); }

    [data-command=lock-cells] { --icon: var(--icon-lock); }
    [data-command=wrap-text] { --icon: var(--icon-wrap-text); }
    [data-icon=comment] { --icon: var(--icon-comment); }
    [data-icon=table] { --icon: var(--icon-table); }
    
    [data-icon=layout] { --icon: var(--icon-layout); }
    [data-command=freeze-panes] { --icon: var(--icon-freeze); }
    
    [data-command=insert-column-chart] { --icon: var(--icon-column-chart); }
    [data-command=insert-donut-chart] { --icon: var(--icon-donut-chart); }
    [data-command=insert-bar-chart] { --icon: var(--icon-bar-chart); }
    [data-command=insert-line-chart] { --icon: var(--icon-line-chart); }
    [data-command=insert-image] { --icon: var(--icon-image); }

    [data-command=border-bottom] { --icon: var(--icon-border-bottom); }
    [data-command=border-left] { --icon: var(--icon-border-left); }
    [data-command=border-right] { --icon: var(--icon-border-right); }
    [data-command=border-top] { --icon: var(--icon-border-top); }
    [data-command=border-outside] { --icon: var(--icon-border-outer); }
    [data-command=border-all] { --icon: var(--icon-border-all); }
    [data-command=border-none] { --icon: var(--icon-border-none); }
    [data-command=border-double-bottom] { --icon: var(--icon-border-double-bottom); }
    [data-icon=palette] { --icon: var(--icon-palette); } 

    [data-command=recalculate] { 
      --icon: var(--icon-recalculate); 
      --icon-size: 20px 20px;
    } 

    .treb-font-scale {
      width: 4em;
    }

    .treb-number-format {
      width: 8em;
    }

    .treb-color-chooser {

      button[data-command=set-color] {
        padding: 0;
        display: flex;
        align-items: center;
        width: $button-width;
        justify-content: center;

        & > svg {
          pointer-events: none;
        }

      }

      & > div {
        padding: .75rem .75rem;
      }

      & > div + div {
        padding-top: 0;
      }
      
      & > div:last-child {
        
        display: flex;
        flex-direction: row;
        gap: .5rem;
        align-items: center;

        input {
          flex-grow: 1;
          padding: 0 .5rem;
        }

        input, button {
          border: 1px solid $border-color;
          border-radius: $border-radius;
          height: $button-width;
        }

      }

      .treb-swatches, .treb-default-swatch {

        button {
          width: $swatch-size;
          height: $swatch-size;
          padding: 0;
          margin: 0;
          border: 1px solid $border-color;
          border-radius: 2px;          
        }

        .treb-default-color::before {
          opacity: .7;
          content: '';
          display: block;
          position: relative;
          background: currentColor;
          width: 100%;
          height: 100%;
          mask-position: center;
          -webkit-mask-position: center;
          mask-repeat: no-repeat;
          -webkit-mask-repeat: no-repeat;
          mask-image: var(--icon-x);
          -webkit-mask-image: var(--icon-x);
          mask-size: 24px 24px;
          -webkit-mask-size: 24px 24px;
        }

      }

      .treb-default-swatch {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: .5rem;
        align-items: center;
      }

      .treb-swatches {

        display: grid;
        grid-template-columns: repeat(10, 1fr);
        gap: .5rem;

      }
    }

    .treb-comment-box {
      textarea {
        font: inherit;
        resize: both;
        border: 1px solid $border-color;
        padding: .25rem;
        line-height: 1.5;
        margin: .5rem;
        height: 10rem;
      }

      textarea + div {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: 0 0 .5rem 0;

        button {
          border: 1px solid $border-color;
          border-radius: $border-radius;
        }

      }

    }

    .treb-font-scale {
      padding-left: 2em;
      width: 5em;
      text-align: right;
    }

    [composite][font-scale] {
      position: relative;
    }

    .treb-font-scale-icon {
      position: absolute;
      top: 50%;
      left: .5em;
      transform: translateY(-50%);
      opacity: .9;
      // border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
      border-radius: 3px;
      // background: color-mix(in srgb, currentColor 10%, transparent);

      pointer-events: none;
      line-height: 1;

      &::before, &::after {
        content: 'A';
        position: relative;
      }

      &::before {
        font-size: 1.2em;
      }
      &::after {
        font-size: .9em;
        left: -.125em;
      }
    }

  }

}