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

/**
 * rebuilding, try to keep it sane
 *
 * NOTE: this file uses the color-mod() function and a postcss library
 * to translate it. that function is no longer in the spec and will be 
 * implemented differently, so this will probably need to change.
 *
 * originally this file used sass so we used some sass library functions
 * to do the same thing. all we are doing is (1) set alpha on a color and
 * (2) darken a color.
 *
 * UPDATE to support scaling: we won't explicitly set font size (or family).
 * those should be set in containing nodes, possibly from theme or style.
 * we will base our scale 100 at font size 10pt, and scale from there.
 *
 * UPDATE: the color-mod function is no longer used, not sure where it went
 * UPDATE: back to sass, but still using this file (compiles fine)
 */

 .treb-main.treb-main .treb-chart, .treb-chart {

  // this was getting lost by the new higher-specificity reset
  background: var(--treb-chart-background, #fff);

 }

 /**
  * new override allows inheriting fonts in annotations (at least for charts)
  */
.treb-main.treb-main .treb-inherit-font .treb-chart {
  font-family: inherit;
}

/* container style */
.treb-chart {

  /** 
   * default theme. the way we do this now is assign color from the theme, 
   * then optionally set fill/stroke via currentColor. that reduces the number
   * of times we have to define the same colors.
   */

  // lightness offsets for subsequent colors. is there a way we could 
  // have the charts just use a modulo and an offset? (...) would be 
  // cleaner maybe

  /* something like this:
   *
   * .series-1 { color: var(--theme-color); --base-color: var(--theme-color); }
   * .segment-2 { color: lch(from var(--base-color) calc(l + 20) c h); }
   *
   */

  --segment-2-offset: -20;
  --segment-3-offset:  10;
  --segment-4-offset: -10;
  --segment-5-offset:  20;
  --segment-6-offset: -25;

  .series-1 { color: var(--treb-applied-theme-color-1); }
  .series-2 { color: var(--treb-applied-theme-color-2); }
  .series-3 { color: var(--treb-applied-theme-color-3); }
  .series-4 { color: var(--treb-applied-theme-color-4); }
  .series-5 { color: var(--treb-applied-theme-color-5); }
  .series-6 { color: var(--treb-applied-theme-color-6); }

  .series-7  { color: lch(from var(--treb-applied-theme-color-1) calc(l + var(--segment-2-offset)) c h ); }
  .series-8  { color: lch(from var(--treb-applied-theme-color-2) calc(l + var(--segment-2-offset)) c h ); }
  .series-9  { color: lch(from var(--treb-applied-theme-color-3) calc(l + var(--segment-2-offset)) c h ); }
  .series-10 { color: lch(from var(--treb-applied-theme-color-4) calc(l + var(--segment-2-offset)) c h ); }
  .series-11 { color: lch(from var(--treb-applied-theme-color-5) calc(l + var(--segment-2-offset)) c h ); }
  .series-12 { color: lch(from var(--treb-applied-theme-color-6) calc(l + var(--segment-2-offset)) c h ); }

  .series-13 { color: lch(from var(--treb-applied-theme-color-1) calc(l + var(--segment-3-offset)) c h ); }
  .series-14 { color: lch(from var(--treb-applied-theme-color-2) calc(l + var(--segment-3-offset)) c h ); }
  .series-15 { color: lch(from var(--treb-applied-theme-color-3) calc(l + var(--segment-3-offset)) c h ); }
  .series-16 { color: lch(from var(--treb-applied-theme-color-4) calc(l + var(--segment-3-offset)) c h ); }
  .series-17 { color: lch(from var(--treb-applied-theme-color-5) calc(l + var(--segment-3-offset)) c h ); }
  .series-18 { color: lch(from var(--treb-applied-theme-color-6) calc(l + var(--segment-3-offset)) c h ); }

  .series-19 { color: lch(from var(--treb-applied-theme-color-1) calc(l + var(--segment-4-offset)) c h ); }
  .series-20 { color: lch(from var(--treb-applied-theme-color-2) calc(l + var(--segment-4-offset)) c h ); }
  .series-21 { color: lch(from var(--treb-applied-theme-color-3) calc(l + var(--segment-4-offset)) c h ); }
  .series-22 { color: lch(from var(--treb-applied-theme-color-4) calc(l + var(--segment-4-offset)) c h ); }
  .series-23 { color: lch(from var(--treb-applied-theme-color-5) calc(l + var(--segment-4-offset)) c h ); }
  .series-24 { color: lch(from var(--treb-applied-theme-color-6) calc(l + var(--segment-4-offset)) c h ); }

  .series-25 { color: lch(from var(--treb-applied-theme-color-1) calc(l + var(--segment-5-offset)) c h ); }
  .series-26 { color: lch(from var(--treb-applied-theme-color-2) calc(l + var(--segment-5-offset)) c h ); }
  .series-27 { color: lch(from var(--treb-applied-theme-color-3) calc(l + var(--segment-5-offset)) c h ); }
  .series-28 { color: lch(from var(--treb-applied-theme-color-4) calc(l + var(--segment-5-offset)) c h ); }
  .series-29 { color: lch(from var(--treb-applied-theme-color-5) calc(l + var(--segment-5-offset)) c h ); }
  .series-30 { color: lch(from var(--treb-applied-theme-color-6) calc(l + var(--segment-5-offset)) c h ); }

  .series-31 { color: lch(from var(--treb-applied-theme-color-1) calc(l + var(--segment-6-offset)) c h ); }
  .series-32 { color: lch(from var(--treb-applied-theme-color-2) calc(l + var(--segment-6-offset)) c h ); }
  .series-33 { color: lch(from var(--treb-applied-theme-color-3) calc(l + var(--segment-6-offset)) c h ); }
  .series-34 { color: lch(from var(--treb-applied-theme-color-4) calc(l + var(--segment-6-offset)) c h ); }
  .series-35 { color: lch(from var(--treb-applied-theme-color-5) calc(l + var(--segment-6-offset)) c h ); }
  .series-36 { color: lch(from var(--treb-applied-theme-color-6) calc(l + var(--segment-6-offset)) c h ); }

  /* chart title, at top or bottom */
  .chart-title {
    font-size: 1.4em;
  }

  /* axis labels */
  .axis-group {
    font-size: .9em;

    .series-name {
      font-size: 1.3em;
    }

  }

  /* default text color */
  text {
    fill: var(--treb-chart-text-color, #000);
    stroke: none;
  }

  /* legend uses matching series colors */
  .legend {
    font-size: 1.05em; // ?
    rect {
      fill: currentColor;
    }
    circle {
      fill: currentColor;
      fill-opacity: .5;
      stroke: currentColor;
      stroke-width: 2px;
      r: .25em;
    }
  }

  /* grid */
  .chart-grid, .chart-ticks {
    stroke: var(--treb-chart-grid-color, #ddd);

    &.zero {
      stroke: var(--treb-chart-grid-zero-color, var(--treb-chart-grid-color, #999));
    }

  }

  /* mouse elements */
  .label-target {
    stroke: none;
    fill: transparent;
    
  }

  path.label-target {
    transition: fill .2s;
  }

  path.label-target:hover {
    fill: rgba(0, 0, 0, .15);
  }

  .data-label {
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease-in-out;

    & text {
      fill: #fff;
    }

    & path {
      fill: #000;
    }

    & .marker-highlight {
      fill: currentColor;
      stroke: none;
    }

  }

  .label-target:hover + .data-label {
    opacity: 1;
  }

  /* old type of line chart */
  .chart-line {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }

  /**
   * area chart has separate parts for line and area
   * (because the line doesn't go up and down the sides)
   */
  .chart-area {
    .line {
      stroke: currentColor;
      stroke-width: 2px;
      fill: none;
    }
    .fill {
      fill: currentColor;
      opacity: .5;
    }
  }

  .box-plot {

    .iqr {
      fill: none;
      stroke: CanvasText;
      stroke-width: 1px;
    }

    .median {
      stroke-width: 3px;
      stroke: CanvasText;
      fill: none;
    }

    .outlier {
      stroke-width: 1px;
      stroke: CanvasText;
      fill: none;
      r: 3;
    }

    .whisker {
      stroke-width: 1px;
      stroke: CanvasText;
      fill: none;
    }

    .whisker-extent {
      stroke-width: 1px;
      stroke: CanvasText;
      fill: none;
      stroke-dasharray: 3 3;
    }

  }

  .bubble-chart {

    stroke-width: 3;
    fill: color-mix(in srgb, currentColor 75%, transparent);
    stroke: currentColor;
  }

  .bubble-label {

    .label-background {
      stroke: none;
      fill: none;

      /*
      fill: Canvas;
      fill-opacity: .5;
      rx: 2px;
      */
    }

    .label-text {

      /**
      * default translate to lower-right. you can calc() to switch 
      * to a different position.
      */
      transform: translate(var(--translate-offset), var(--translate-offset));

    }

  }

  /* scatter plot line (and marker -- change that class name) */
  .scatter-plot {

    stroke-width: 3;
    fill: none;
    stroke: currentColor;

    & .fill {
      fill: currentColor;
      opacity: .5;
      stroke: none;
    }

    /**
     * circle marker
     */
    & .marker {

      stroke-width: 2.5px;
      fill: #fff;
      transition: stroke-width .15s ease-in;

      &:hover {
        stroke-width: 5px;
      }

    }

  }

  /* donut/pie */
  .donut {

    & path {
      fill: currentColor; /* has to be attached to path for IE11 */
    }

    /* this is the dotted line to callouts */
    & path.callout {
      fill: none;
      stroke: #999;
      stroke-dasharray: 2 2;
    }
 
    /* this is the actual label */
    text.callout-label {
      /* font-size: 10pt; */
      font-size: 1em;
    }

  }

  /* HISTOGRAM NEEDS CLEANUP (IN LAYOUT) */
  .chart-column {
    fill: currentColor;
    stroke: none;
  }

  /* SO DOES CORRELATION CHART */
  .mc-correlation {
    stroke: currentColor;
    stroke-width: 1;
  }

}