:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D40;
}

:import {
  -st-from: '../Foundation/stylable/easing.st.css';
  -st-named: ease-8;
}

:vars {
  canvas-top-gap: 6px;
  canvas-bottom-gap: 31px;
  datasetBg: rgba(51, 112, 251, 0.06);
  pointBorderColor: rgba(51, 112, 251, 0);
  pointBackgroundColor: rgba(51, 112, 251, 0);
  datasetLineColor: #3370FB;
  pointHoverBackgroundColor: #FFFFFF;
  pointHoverBorderColor: #3370FB;
  gridLineZeroLineColor: #7A92A5;
  gridLineFontColor: #CBD3DC;
  tooltipBg: #162D3D;
}

.lineChart {
  position: relative;
  z-index: 0;
}

.lineChartCursor {
  top: value(canvas-top-gap);
  left: 50%;
  width: 1px;
  height: calc(100% - value(canvas-bottom-gap));
  transition: opacity .1s value(ease-8);
  opacity: 0;
  position: absolute;
  z-index: -1;
  background: value(D40);
  will-change: opacity, left;
}

.lineChartAxis {
  position: absolute;
  z-index: -1;

  background: value(D40);
}

/* st-namespace-reference="../../../../src/AreaChart/AreaChart.st.css" */