@import 'https://code.highcharts.com/css/highcharts.css';

.dsd-theme-highcharts {
  /* bar charts, pie charts */
  --dsd-highcharts-color-background-bar-pie-0: #00874e;
  --dsd-highcharts-color-background-bar-pie-1: #053e26;
  --dsd-highcharts-color-background-bar-pie-2: #658c9b;
  --dsd-highcharts-color-background-bar-pie-3: #00727e;
  --dsd-highcharts-color-background-bar-pie-4: #97313c;
  --dsd-highcharts-color-background-bar-pie-5: #667681;

  /* Area charts */
  --dsd-highcharts-color-background-area-0: #00874e;
  --dsd-highcharts-color-background-area-1: #658c9b;

  /* Line charts & area charts icon */
  --dsd-highcharts-color-border-line-area-0: #053e26;
  --dsd-highcharts-color-border-line-area-1: #112b35;
  --dsd-highcharts-color-border-line-area-2: #00727e;
  --dsd-highcharts-color-border-line-area-3: #97313c;
  --dsd-highcharts-color-border-line-area-4: #6e5405;
  --dsd-highcharts-color-icon-line-area-0: #00874e;
  --dsd-highcharts-color-icon-line-area-1: #658c9b;
  --dsd-highcharts-color-icon-line-area-2: #69b4c5;
  --dsd-highcharts-color-icon-line-area-3: #ec7878;
  --dsd-highcharts-color-icon-line-area-4: #f6c93c;

  /* stacked and percentage Area charts */
  --dsd-highcharts-color-background-stacked-area-0: #b0d6c6;
  --dsd-highcharts-color-background-stacked-area-1: #b0c9cc;
  --dsd-highcharts-color-background-stacked-area-2: #afdbe1;
  --dsd-highcharts-color-background-stacked-area-3: #ffada2;
  --dsd-highcharts-color-background-stacked-area-4: #ffe387;
  --dsd-highcharts-color-menu-item-hover: var(--dsd-color-font-default);

  /* Highcharts variables */
  --highcharts-background-color: var(--dsd-color-background-default);
  --highcharts-color-0: var(--dsd-highcharts-color-background-bar-pie-0);
  --highcharts-color-1: var(--dsd-highcharts-color-background-bar-pie-1);
  --highcharts-color-2: var(--dsd-highcharts-color-background-bar-pie-2);
  --highcharts-color-3: var(--dsd-highcharts-color-background-bar-pie-3);
  --highcharts-color-4: var(--dsd-highcharts-color-background-bar-pie-4);
  --highcharts-color-5: var(--dsd-highcharts-color-background-bar-pie-5);

  /* Grid lines etc. */
  --highcharts-neutral-color-10: var(--dsd-color-border-decorative-graphite-200);

  /* Axis title, connector fallback. */
  --highcharts-neutral-color-60: var(--dsd-color-font-default);

  /* Main text, axis labels and some strokes. */
  --highcharts-neutral-color-80: var(--dsd-color-font-contrast);

  /* Strong text. */
  --highcharts-neutral-color-100: var(--dsd-color-font-default);

  /* Pressed button, color axis min color. */
  --highcharts-highlight-color-10: var(--dsd-color-background-decorative-brand-300);
}

.dsd-mode-dark .dsd-theme-highcharts {
  /* bar charts, pie charts */
  --dsd-highcharts-color-background-bar-pie-0: #00ac62;
  --dsd-highcharts-color-background-bar-pie-1: #d0f1dd;
  --dsd-highcharts-color-background-bar-pie-2: #618c9b;
  --dsd-highcharts-color-background-bar-pie-3: #8bc5cc;
  --dsd-highcharts-color-background-bar-pie-4: #e86b6b;
  --dsd-highcharts-color-background-bar-pie-5: #b3b5b7;

  /* Area charts */
  --dsd-highcharts-color-background-area-0: #00874e;
  --dsd-highcharts-color-background-area-1: #658c9b;

  /* Line charts & area charts icon */
  --dsd-highcharts-color-border-line-area-0: #e2feed;
  --dsd-highcharts-color-border-line-area-1: #ddfbff;
  --dsd-highcharts-color-border-line-area-2: #e4fdff;
  --dsd-highcharts-color-border-line-area-3: #fee9e3;
  --dsd-highcharts-color-border-line-area-4: #fff3ca;
  --dsd-highcharts-color-icon-line-area-0: #00ac62;
  --dsd-highcharts-color-icon-line-area-1: #618c9b;
  --dsd-highcharts-color-icon-line-area-2: #56a0b1;
  --dsd-highcharts-color-icon-line-area-3: #e86b6b;
  --dsd-highcharts-color-icon-line-area-4: #f6c93c;

  /* stacked and percentage Area charts */
  --dsd-highcharts-color-background-stacked-area-0: #006b3d;
  --dsd-highcharts-color-background-stacked-area-1: #1e4d5d;
  --dsd-highcharts-color-background-stacked-area-2: #02616b;
  --dsd-highcharts-color-background-stacked-area-3: #97313c;
  --dsd-highcharts-color-background-stacked-area-4: #6e5405;
  --dsd-highcharts-color-menu-item-hover: var(--dsd-color-font-reversed);
}

.highcharts-container {
  font-family: var(--dsd-font-main-name), Arial, Helvetica, sans-serif;
}

.highcharts-axis-line {
  stroke: var(--highcharts-neutral-color-10);
}

.highcharts-yaxis-labels {
  fill: var(--dsd-color-font-secondary);
}

.highcharts-axis-labels {
  fill: var(--dsd-color-font-secondary);
}

/* Tick */
.highcharts-tick {
  stroke: transparent;
}

/* Accessibility */

.highcharts-focus-border {
  stroke: var(--dsd-color-border-focus);
}

/* Tooltip */

.highcharts-tooltip .highcharts-tooltip-box {
  fill: rgba(var(--dsd-color-background-decorative-graphite-100-rgb), 0.95);
  stroke: var(--dsd-color-border-brand);
  stroke-width: 1px;
}

/* Legend */
.highcharts-legend-item > text {
  font-size: var(--dsd-font-size-b30);
}

/* Spacing between stacked column */
.highcharts-column-series:not(.highcharts-legend-item) .highcharts-point {
  stroke-width: 2px;
}

/* Pie charts */

/* Spacing between pies in styled mode */
.highcharts-pie-series:not(.highcharts-legend-item) .highcharts-point {
  stroke-width: 4px;
}

.highcharts-legend-item.highcharts-pie-series .highcharts-point {
  stroke-width: 0;
}

/* Line charts */

.highcharts-spline-series {
  --highcharts-color-0: var(--dsd-highcharts-color-border-line-area-0);
  --highcharts-color-1: var(--dsd-highcharts-color-border-line-area-1);
  --highcharts-color-2: var(--dsd-highcharts-color-border-line-area-2);
  --highcharts-color-3: var(--dsd-highcharts-color-border-line-area-3);
  --highcharts-color-4: var(--dsd-highcharts-color-border-line-area-4);
}

.highcharts-spline-series .highcharts-point {
  stroke-width: 2px;
}

.highcharts-spline-series .highcharts-point.highcharts-color-0,
.highcharts-legend-item.highcharts-spline-series.highcharts-color-0 .highcharts-point {
  fill: var(--dsd-highcharts-color-icon-line-area-0);
}

.highcharts-spline-series .highcharts-point.highcharts-color-1,
.highcharts-legend-item.highcharts-spline-series.highcharts-color-1 .highcharts-point {
  fill: var(--dsd-highcharts-color-icon-line-area-1);
}

.highcharts-spline-series .highcharts-point.highcharts-color-2,
.highcharts-legend-item.highcharts-spline-series.highcharts-color-2 .highcharts-point {
  fill: var(--dsd-highcharts-color-icon-line-area-2);
}

.highcharts-spline-series .highcharts-point.highcharts-color-3,
.highcharts-legend-item.highcharts-spline-series.highcharts-color-3 .highcharts-point {
  fill: var(--dsd-highcharts-color-icon-line-area-3);
}

.highcharts-spline-series .highcharts-point.highcharts-color-4,
.highcharts-legend-item.highcharts-spline-series.highcharts-color-4 .highcharts-point {
  fill: var(--dsd-highcharts-color-icon-line-area-4);
}

/* Area spline */

.highcharts-areaspline-series {
  --highcharts-color-0: var(--dsd-highcharts-color-border-line-area-0);
  --highcharts-color-1: var(--dsd-highcharts-color-border-line-area-1);
  --highcharts-color-2: var(--dsd-highcharts-color-border-line-area-2);
  --highcharts-color-3: var(--dsd-highcharts-color-border-line-area-3);
  --highcharts-color-4: var(--dsd-highcharts-color-border-line-area-4);
}

.highcharts-areaspline-series .highcharts-area {
  fill-opacity: 0.5;
}

.highcharts-areaspline-series .highcharts-point {
  stroke-width: 2px;
}

.highcharts-areaspline-series .highcharts-point.highcharts-color-0,
.highcharts-areaspline-series.highcharts-color-0 .highcharts-area,
.highcharts-legend-item.highcharts-areaspline-series.highcharts-color-0 .highcharts-point {
  fill: var(--dsd-highcharts-color-icon-line-area-0);
}

.highcharts-areaspline-series .highcharts-point.highcharts-color-1,
.highcharts-areaspline-series.highcharts-color-1 .highcharts-area,
.highcharts-legend-item.highcharts-areaspline-series.highcharts-color-1 .highcharts-point {
  fill: var(--dsd-highcharts-color-icon-line-area-1);
}

.highcharts-areaspline-series .highcharts-point.highcharts-color-2,
.highcharts-areaspline-series.highcharts-color-2 .highcharts-area,
.highcharts-legend-item.highcharts-areaspline-series.highcharts-color-2 .highcharts-point {
  fill: var(--dsd-highcharts-color-icon-line-area-2);
}

.highcharts-areaspline-series .highcharts-point.highcharts-color-3,
.highcharts-areaspline-series.highcharts-color-3 .highcharts-area,
.highcharts-legend-item.highcharts-areaspline-series.highcharts-color-3 .highcharts-point {
  fill: var(--dsd-highcharts-color-icon-line-area-3);
}

.highcharts-areaspline-series .highcharts-point.highcharts-color-4,
.highcharts-areaspline-series.highcharts-color-4 .highcharts-area,
.highcharts-legend-item.highcharts-areaspline-series.highcharts-color-4 .highcharts-point {
  fill: var(--dsd-highcharts-color-icon-line-area-4);
}

/* Area */

/* TODO fill-opacity: 0.5; */

.highcharts-area-series {
  --highcharts-color-0: var(--dsd-highcharts-color-border-line-area-0);
  --highcharts-color-1: var(--dsd-highcharts-color-border-line-area-1);
  --highcharts-color-2: var(--dsd-highcharts-color-border-line-area-2);
  --highcharts-color-3: var(--dsd-highcharts-color-border-line-area-3);
  --highcharts-color-4: var(--dsd-highcharts-color-border-line-area-4);
}

.highcharts-area-series .highcharts-point {
  stroke-width: 2px;
}

.highcharts-area-series .highcharts-point.highcharts-color-0,
.highcharts-legend-item.highcharts-area-series.highcharts-color-0 .highcharts-point {
  fill: var(--dsd-highcharts-color-icon-line-area-0);
}

.highcharts-area-series.highcharts-color-0 .highcharts-area {
  fill: var(--dsd-highcharts-color-background-stacked-area-0);
}

.highcharts-area-series .highcharts-point.highcharts-color-1,
.highcharts-legend-item.highcharts-area-series.highcharts-color-1 .highcharts-point {
  fill: var(--dsd-highcharts-color-icon-line-area-1);
}

.highcharts-area-series.highcharts-color-1 .highcharts-area {
  fill: var(--dsd-highcharts-color-background-stacked-area-1);
}

.highcharts-area-series .highcharts-point.highcharts-color-2,
.highcharts-legend-item.highcharts-area-series.highcharts-color-2 .highcharts-point {
  fill: var(--dsd-highcharts-color-icon-line-area-2);
}

.highcharts-area-series.highcharts-color-2 .highcharts-area {
  fill: var(--dsd-highcharts-color-background-stacked-area-2);
}

.highcharts-area-series .highcharts-point.highcharts-color-3,
.highcharts-legend-item.highcharts-area-series.highcharts-color-3 .highcharts-point {
  fill: var(--dsd-highcharts-color-icon-line-area-3);
}

.highcharts-area-series.highcharts-color-3 .highcharts-area {
  fill: var(--dsd-highcharts-color-background-stacked-area-3);
}

.highcharts-area-series .highcharts-point.highcharts-color-4,
.highcharts-legend-item.highcharts-area-series.highcharts-color-4 .highcharts-point {
  fill: var(--dsd-highcharts-color-icon-line-area-4);
}

.highcharts-area-series.highcharts-color-4 .highcharts-area {
  fill: var(--dsd-highcharts-color-background-stacked-area-4);
}

/* Candlestick */

.highcharts-candlestick-series .highcharts-point-up {
  stroke: var(--dsd-color-border-decorative-brand-400);
}

.highcharts-candlestick-series .highcharts-point-down {
  fill: var(--dsd-color-icon-tag-error);
  stroke: var(--dsd-color-icon-tag-error);
}

/* Candlestick navigator */
.highcharts-navigator-mask-inside {
  fill: var(--dsd-color-icon-tag-confirmation);
  fill-opacity: 0.5;
}

.highcharts-navigator-outline,
.highcharts-navigator-xaxis .highcharts-grid-line {
  stroke: var(--dsd-color-background-decorative-graphite-400);
}

.highcharts-navigator-series .highcharts-area {
  fill: var(--dsd-color-background-decorative-brand-200) !important;
  fill-opacity: 0.5;
}

.highcharts-navigator-series .highcharts-graph {
  stroke: var(--dsd-color-border-decorative-brand-400);
}

.highcharts-range-selector-buttons {
  display: none;
}

/* Highchart context menu */
.highcharts-a11y-proxy-group-chartMenu .highcharts-a11y-proxy-element {
  pointer-events: none;
}

.highcharts-contextbutton:hover {
  cursor: pointer;
  fill: var(--dsd-color-background-decorative-graphite-300);
}

.highcharts-button-symbol {
  fill: var(--dsd-color-icon-default);
  stroke-width: 0;
}

.highcharts-contextbutton:active {
  fill: var(--dsd-color-background-button-brand);
}

.highcharts-contextbutton:active path {
  fill: var(--dsd-color-icon-reversed);
}

.highcharts-menu {
  box-shadow: var(--dsd-elevation-options-menu);
  margin: var(--dsd-spacing-margin-xxsmall-rem) var(--dsd-spacing-margin-none);
  padding: var(--dsd-spacing-padding-xsmall) var(--dsd-spacing-padding-none);
}

.highcharts-menu hr {
  display: none;
}

.highcharts-menu-item {
  color: var(--dsd-color-font-default);
  font-size: var(--dsd-font-size-b30);
  line-height: var(--dsd-font-line-height-b30);
  margin: 0;
  padding: 6px 16px;
}

.highcharts-menu-item:hover {
  color: var(--dsd-highcharts-color-menu-item-hover);
}

.highcharts-menu-item:focus {
  border-radius: var(--dsd-radius-xsmall);
  -webkit-box-shadow: inset 0 0 0 var(--dsd-rem-2-px) var(--dsd-color-border-focus);
  box-shadow: inset 0 0 0 var(--dsd-rem-2-px) var(--dsd-color-border-focus);
  outline: none;
}

/* Data table */
.highcharts-data-table table {
  outline: none !important;
}