/**
 * Default frond-end styles for the LTO energie plugin but only when enabled in plugin.
 * Will always be used in admin when on plugin pages when shortcodes are shown.
 */

/*** Chart vars ***/
:root {
  /* Charts, these are fetched with JS DO NOT USE CHARACTERS LIKE - IN VARNAME!!! */
  --ltoenergiechart-fill: rgba(124, 181, 236, .75);
  --ltoenergiechart-border: #1c97d2;
  --ltoenergiechart-bordersize: 1.5;
  --ltoenergiechart-grid: #e6e6e6;
  --ltoenergiechart-ticks: #666666;
  --ltoenergiechart-title: #666666;
  --ltoenergiechart-tipbg: rgba(0, 0, 0, 0.8);
  --ltoenergiechart-tipcolor: #fff;
  --ltoenergiechart-point: 0;
  --ltoenergiechart-pointhover: 8;
  /* Also labels for charts, do not wrap in qoutes! */
  --ltoenergiechart-labelx: Datum;
  --ltoenergiechart-labely: Tarief;
  /* Elements */
  --ltoenergiechart-btn-bg: #00a950;
}

/* The outer wrapper, always shown even when no prices, when chart is zoomed a class zoomed will be added by JS. */
.lto-energiechart-wrap {
  overflow: hidden;
}

/* The chart wrapper, only shown when prices, this needs a static height. */
.lto-energiechart-chart {
  height: 400px;
  overflow: hidden;
}

/* The button wrapper shown below chart. */
.lto-energiechart-btnbox {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

/* This is just as an example, all depends on design. */
.lto-energiechart-btnbox::before {
  content: "Zoom in door met de muis een selectie te maken.";
  display: block;
  font-size: 14px;
  color: var(--ltoenergiechart-btn-bg);
  padding: 4px 12px 5px 12px;
}

/* Just added as an example, but the text can change onload (when touch is detected) */
body.istouch .lto-energiechart-btnbox::before {
  content: "Zoom in of uit met pinch.";

}

/* The actual button, this should probably get a theme class. */
.lto-energiechart-btnzoom {
  margin: auto 0 auto auto;
  padding: 4px 12px 5px 12px;
  /* Taken from current site */
  background-color: var(--ltoenergiechart-btn-bg);
  border: 0;
  font-size: 14px;
  color: #fff;
}

/* When chart is zoomed the wrapper will get an extra class */
.lto-energiechart-wrap:not(.zoomed) .lto-energiechart-btnzoom {
  filter: grayscale(1) opacity(.3);
  pointer-events: none;
}

/* The message shown in wrapper when no prices. */
.lto-energiechart-noprices {
  
}