/* Copyright 2015 Bloomberg Finance L.P.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
  --bq-content-font-color: var(--jp-content-font-color1);
  --bq-content-scatter-font-color: var(--jp-content-font-color1);
  --bq-background: var(--jp-layout-color0);
  --bq-font: 12px sans-serif;

  --bq-axislabel-font: 14px sans-serif;

  --bq-axis-rect-opacity: 1;
  --bq-axis-tick-stroke-width: 1;
  --bq-axis-tick-opacity: 1;
  --bq-axis-tick-text-font: var(--bq-font);

  --bq-mark-tooltip-border-radius: 5px;
  --bq-mark-tooltip--webkit-user-select: none;
  --bq-mark-tooltip--moz-user-select: none;

  --bq-mainheading-font: 16px sans-serif;
  --bq-mainheading-font-size: large;

  --bq-world-map-path-stroke-width: 0.25px;

  --bq-pie-polyline-stroke-width: 1px;
  --bq-pie-polyline-fill: none;

  --bq-network-node-element-stroke: #000;
  --bq-network-node-element-stroke-width: 1.5px;

  --bq-network-link-fill: none;
  --bq-network-link-stroke: #666;
  --bq-network-link-stroke-width: 1.5px;

  --bq-network-node-label-pointer-events: none;
  --bq-network-node-label-font: var(--bq-font);

  --bq-selector-fill: var(--jp-border-color1);

  --bq-network-node-label-text-fill: #000;

  --bq-mark-tooltip-border: 2px solid var(--jp-border-color0);
  --bq-mark-tooltip-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --bq-mark-tooltip-background-color: var(--jp-layout-color0);
  --bq-mark-tooltip-td-border: 1px solid var(--jp-border-color1);

  --bq-world-map-path-stroke: black;
  --bq-world-map-path-fill: seagreen;

  --bq-pie-polyline-opacity: 0.3;
  --bq-pie-polyline-stroke: var(--bq-content-font-color);

  --bq-network-node-element-fill: #666;
  --bq-linkarrow-fill-dark: rgb(0, 0, 0);
  --bq-linkarrow-fill-light: #666;

  --bq-default-stroke: var(--bq-content-font-color);
  --bq-stick-stroke: var(--bq-content-font-color);
  --bq-stick-fill: var(--bq-content-font-color);
  --bq-sticktext-fill: var(--bq-content-font-color);
}

/*
 * gg and classic bqplot themes differ in the styling of the svg-background.
 *
 * plot area background fill:
 *   - gg: contrasted with the jupyterlab background. var(--jp-layout-color2);
 *   - classic: less contrasted: var(--jp-layout-color1);
 *
 * tick text fill:
 *   - gg: less contrasted with background: var(--jp-content-font-color2);
 *   - classic: more contrasted with background: var(--jp-content-font-color1);
 *
 * grid, axes, and tick colors:
 *   - gg: grid, axes, and tick marks are all of the same (grid) color
 *   - classic: grid has little contrast with respect to the background while the axes,
 *     and tick marks are more contrasted.
 */

.common() {
  --bq-mainheading-fill: var(--bq-content-font-color);
  --bq-axislabel-fill: var(--bq-content-font-color);
}

.gg {
  --bq-plotarea-background-fill: var(--jp-layout-color2);
  --bq-axis-tick-text-fill: var(--jp-content-font-color2);

  --bq-grid-color: var(--jp-layout-color0);
  --bq-axis-rect-stroke: var(--bq-grid-color);
  --bq-axis-path-stroke: var(--bq-grid-color);
  --bq-axis-tick-stroke: var(--bq-grid-color);
  --bq-axis-tick-short-stroke: var(--bq-grid-color);

  .common();
}

[data-jp-theme-light='false'] .gg {
  --bq-plotarea-background-fill: var(--jp-layout-color1);
}

[data-jp-theme-light='false'] .linkarrow {
  fill: var(--bq-linkarrow-fill-light);
}

[data-jp-theme-light='false'] .network .node .label {
  --bq-network-node-label-text-fill: #727272;
}

.classic {
  --bq-plotarea-background-fill: var(--jp-layout-color0);
  --bq-axis-tick-text-fill: var(--jp-content-font-color2);

  --bq-grid-color: var(--jp-layout-color2);
  --bq-axis-border-color: var(--jp-content-font-color2);
  --bq-axis-path-stroke: var(--bq-axis-border-color);
  --bq-axis-rect-stroke: var(--bq-axis-border-color);
  --bq-axis-tick-stroke: var(--bq-grid-color);
  --bq-axis-tick-short-stroke: var(--bq-axis-border-color);

  .common();
}

.bbg,
[data-jp-theme-light='false'] {
  --bq-content-font-color: orange;

  .common();
}

.bqplot {
  box-sizing: border-box;
  display: flex;
  width: auto;
  height: 480px;
}
.bqplot > .svg-background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.bqplot > canvas {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.bqplot > svg {
  z-index: 0;
  font: 11px sans-serif;
  user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  flex-grow: 1;

  .svg-figure {
    background: var(--bq-background);
  }

  .axis {
    rect {
      stroke: var(--bq-axis-rect-stroke);
      opacity: var(--bq-axis-rect-opacity);
    }
    .tick line {
      stroke: var(--bq-axis-tick-stroke);
      stroke-width: var(--bq-axis-tick-stroke-width);
      opacity: var(--bq-axis-tick-opacity);
    }
    .tick.short line {
      stroke: var(--bq-axis-tick-short-stroke);
    }
    .tick text {
      fill: var(--bq-axis-tick-text-fill);
      font: var(--bq-axis-tick-text-font);
    }
    line {
      shape-rendering: crispEdges;
      font: 10px sans-serif;
      stroke-width: 1px;
    }
    path,
    line {
      fill: none;
    }
    path {
      stroke: var(--bq-axis-path-stroke);
    }

    text.axislabel,
    tspan.axislabel {
      text-anchor: end;
      fill: var(--bq-axislabel-fill);
      font: var(--bq-axislabel-font);
    }
    .tick text {
      cursor: default;
    }
  }
  .axis.axisbold path {
    stroke-width: 3px;
  }
  .axis.axisbold text,
  .axis.axisbold text.axislabel {
    font-weight: bolder;
  }
  .stick,
  .zeroLine {
    stroke: var(--bq-stick-stroke);
    fill: var(--bq-stick-fill);
  }
  .sticktext {
    fill: var(--bq-sticktext-fill);
  }
  .bargroup,
  .boxplot,
  .slice {
    rect,
    path,
    line {
      stroke: var(--bq-default-stroke);
    }
  }
  .zeroLine {
    shape-rendering: crispEdges;
  }
  text.mainheading {
    text-anchor: middle;
    fill: var(--bq-mainheading-fill);
    font: var(--bq-mainheading-font);
    font-size: var(--bq-mainheading-font-size);
  }
  text.legendtext {
    text-anchor: start;
    font: 14px sans-serif;
  }
  text.dot_text {
    fill: var(--bq-content-scatter-font-color);
  }
  .indsel {
    stroke: red;
  }
  .brushintsel {
    text {
      fill: var(--bq-content-font-color);
      font: var(--bq-font);
      text-anchor: middle;
    }
    .selection {
      fill: var(--bq-selector-fill);
      stroke: none;
    }
  }
  .intsel {
    fill: var(--bq-selector-fill);
    stroke: none;
    fill-opacity: 0.3;
  }
  .intselmouse {
    visibility: hidden;
    pointer-events: all; /*none?*/
  }
  .multiselector {
    .active {
      pointer-events: all;
      .selection {
        stroke: green;
      }
      .overlay {
        pointer-events: all;
      }
    }
    .inactive {
      pointer-events: none;
      .selection {
        stroke: red;
      }
      .overlay {
        pointer-events: none;
      }
    }
    .visible {
      pointer-events: all;
      .selection {
        stroke: red;
      }
      .overlay {
        pointer-events: none;
      }
    }
  }
  .lassoselector {
    .selected {
      opacity: 0.3;
    }
    path {
      fill: none;
      stroke: orange;
      stroke-width: 4;
    }
  }
  .plotarea_background {
    fill: var(--bq-plotarea-background-fill);
  }
  .plotarea_events {
    opacity: 0; // fully transparent, only used for capturing events
  }
  .image_pixelated {
    /*
      optimizespeed does not guarantee nearest neighbor, but firefox seems to do so for now
      https://www.w3.org/TR/SVG/single-page.html#painting-ImageRenderingProperty
      */
    image-rendering: optimizespeed;
    image-rendering: pixelated; /* chrome doesn't support optimizespeed */
    image-rendering: -moz-crisp-edges; /* this is guaranteed to work for firefox */
  }
}

.bqplot .toolbar_div {
  position: absolute;
  transition: visibility 0.5s linear, opacity 0.5s linear;
}

.tooltip_div {
  z-index: 1001;
}
.mark_tooltip {
  pointer-events: none;
  z-index: 1001;
  color: var(--bq-content-font-color);
  font: var(--bq-font);
  border: var(--jp-border-width) solid var(--jp-border-color1);
  box-shadow: var(--bq-mark-tooltip-box-shadow);
  background-color: var(--bq-mark-tooltip-background-color);
  -webkit-user-select: var(--bq-mark-tooltip--webkit-user-select);
  -moz-user-select: var(--bq-mark-tooltip--moz-user-select);
}
.mark_tooltip > .bqplot.figure {
  width: 427px;
  height: 320px;
}
.mark_tooltip .tooltiptext {
  text-align: center;
  padding: 0.5em;
}
.world_map path {
  stroke: var(--bq-world-map-path-stroke);
  stroke-width: var(--bq-world-map-path-stroke-width);
  fill: var(--bq-world-map-path-fill);
}
.world_map .hovered {
  fill: Orange;
  stroke: Orange;
  stroke-width: 2.5px;
}

.world_map #container {
  margin: 10px 10%;
  border: 2px solid #000;
  border-radius: 5px;
  height: 100%;
  overflow: hidden;
  background: #f0f8ff;
}

.world_map .graticule {
  fill: none;
  stroke: #bbb;
  stroke-width: 0.5px;
  stroke-opacity: 0.5;
}

.g_legend {
  fill: none;
}

.pie polyline {
  opacity: var(--bq-pie-polyline-opacity);
  stroke: var(--bq-pie-polyline-stroke);
  stroke-width: var(--bq-pie-polyline-stroke-width);
  fill: var(--bq-pie-polyline-fill);
}

.pie_label {
  fill: var(--bq-content-font-color);
}

.bar_label,
.curve_label {
  fill: var(--bq-content-font-color);
}

.network .node .element {
  fill: var(--bq-network-node-element-fill);
  stroke: var(--bq-network-node-element-stroke);
  stroke-width: var(--bq-network-node-element-stroke-width);
}

.network .link {
  fill: var(--bq-network-link-fill);
  stroke: var(--bq-network-link-stroke);
  stroke-width: var(--bq-network-link-stroke-width);
}

.network .node .label {
  font: var(--bq-network-node-label-font);
  pointer-events: var(--bq-network-node-label-pointer-events);
  text-shadow: var(--bq-network-node-label-text-shadow);
  fill: var(--bq-network-node-label-text-fill);
}

.linkarrow {
  fill: var(--bq-linkarrow-fill-dark);
}
