:where(.britechart) {
  --bc-text: #282c35;
  --bc-text-muted: #666a73;
  --bc-text-subtle: #adb0b6;
  --bc-axis: #adb0b6;
  --bc-grid: #eff2f5;
  --bc-grid-highlight: #45494e;
  --bc-background: Canvas;
  --bc-surface: #fff;
  --bc-border: #d2d6df;
  --bc-skeleton: #eff2f5;
  --bc-skeleton-strong: #c3c6cf;
  --bc-brush-area: #d2d6df;
  --bc-brush-area-missing: #f8f8fa;
  --bc-sparkline-area-start: #f5fdff;
  --bc-sparkline-area-end: #f6fefc;
}

@supports (color: light-dark(#000, #fff)) {
  :where(.britechart) {
    --bc-text: light-dark(#282c35, #eff2f5);
    --bc-text-muted: light-dark(#666a73, #c3c6cf);
    --bc-axis: light-dark(#adb0b6, #666a73);
    --bc-grid: light-dark(#eff2f5, #363a43);
    --bc-grid-highlight: light-dark(#45494e, #c3c6cf);
    --bc-surface: light-dark(#fff, #282c35);
    --bc-border: light-dark(#d2d6df, #45494e);
    --bc-skeleton: light-dark(#eff2f5, #363a43);
    --bc-skeleton-strong: light-dark(#c3c6cf, #45494e);
    --bc-brush-area: light-dark(#d2d6df, #45494e);
    --bc-brush-area-missing: light-dark(#f8f8fa, #363a43);
    --bc-sparkline-area-start: light-dark(#f5fdff, #1c3a3e);
    --bc-sparkline-area-end: light-dark(#f6fefc, #1b3a33);
  }
}
:where(.britechart) text {
  fill: var(--bc-text);
}

.load-state .chart-filter {
  animation: swipe 1.5s linear infinite forwards;
  will-change: transform;
}

@keyframes swipe {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
.grid-line,
.vertical-grid-line,
.horizontal-grid-line {
  fill: none;
  shape-rendering: crispedges;
  stroke: var(--bc-grid);
  stroke-dasharray: 4, 4;
  stroke-width: 1;
}

.horizontal-grid-line--highlighted,
.vertical-grid-line--highlighted {
  stroke: var(--bc-grid-highlight);
  stroke-dasharray: 2, 2;
}

.extended-y-line,
.extended-x-line {
  fill: none;
  shape-rendering: crispedges;
  stroke: var(--bc-axis);
  stroke-width: 1;
}

.tick line {
  fill: none;
  shape-rendering: crispedges;
  stroke: var(--bc-axis);
  stroke-width: 1;
}
.tick text {
  fill: var(--bc-text-muted);
  font-size: 10px;
  padding: 12px;
}

.y-axis-label,
.x-axis-label {
  fill: var(--bc-text-subtle);
  font-size: 12px;
}

.britechart-tooltip {
  font-size: 12px;
}

.britechart-mini-tooltip {
  font-size: 16px;
}

.vertical-marker-container .vertical-marker {
  fill: none;
  stroke: var(--bc-border);
  stroke-width: 1;
}
.vertical-marker-container .data-point-highlighter {
  fill: var(--bc-surface);
  stroke-width: 2;
}

.tooltip-background {
  fill: var(--bc-surface);
  fill-opacity: 0.9;
  stroke: var(--bc-border);
  stroke-width: 1;
}

.britechart-legend .legend-entry {
  font-size: 12px;
}
.britechart-legend .is-faded .legend-entry-name,
.britechart-legend .is-faded .legend-entry-value,
.britechart-legend .is-faded .legend-circle {
  opacity: 0.3;
  transition: opacity 0.2s ease-out;
}
.britechart-legend .legend-entry-name,
.britechart-legend .legend-entry-value,
.britechart-legend .legend-circle {
  font-size: 1em !important;
  letter-spacing: 0.5px;
}
.britechart-legend .legend-entry-value {
  letter-spacing: 0.8px;
  text-anchor: end;
}