/**
 * Default frond-end styles for the LTO diesel 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!!! */
  --ltodieselchart-fill: rgba(249,9, 12, .4);
  --ltodieselchart-border: #f9090c;
  --ltodieselchart-bordersize: 1.5;
  --ltodieselchart-grid: #e6e6e6;
  --ltodieselchart-ticks: #666666;
  --ltodieselchart-title: #666666;
  --ltodieselchart-tipbg: rgba(0, 0, 0, 0.8);
  --ltodieselchart-tipcolor: #fff;
  --ltodieselchart-point: 0;
  --ltodieselchart-pointhover: 8;
  /* Also labels for charts, do not wrap in qoutes! */
  --ltodieselchart-labelx: Datum;
  --ltodieselchart-labely: Dieselprijs;
  /* Elements */
  --ltodieselchart-btn-bg: #00a950;
}

/*** This is the table for prices, also needs to be present in theme style! ***/
.lto-diesel-table {
  background-color: #ddd;
  padding: 10px;
  max-width: fit-content;
}
.lto-diesel-table table {
  border: 1px solid #eee;
  border-collapse: collapse;
  font-size: 18px;
}
.lto-diesel-table table th {
  text-align: left;
  padding: 6px 24px;
}
.lto-diesel-table table td {
  border-top: 1px solid #eee;
  padding: 6px 24px;
}
.lto-diesel-table:not(.lto-diesel-no-price) p {
  font-size: 12px;
}

/*** CHART (this is for admin but also needed on front-end) ***/

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

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

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

/* This is just as an example, all depends on design. */
.lto-dieselchart-btnbox::before {
  content: "Zoom in door met de muis een selectie te maken.";
  display: block;
  font-size: 14px;
  color: var(--ltodieselchart-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-dieselchart-btnbox::before {
  content: "Zoom in of uit met pinch.";

}

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

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

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