@import 'element:ef-canvas';
@import 'element:ef-tooltip';

:host {
  --spacing: 2;

  --below-point-color: @dataviz-color-red;
  --mid-point-color: @panel-background-color;
  --above-point-color: @dataviz-color-green;

  background-color: @panel-background-color;

  [part='canvas'] {
    color: fade(if(lightness(@panel-background-color) > 50%, black, white), 80%);
  }

  .x-axis-item {
    padding: 4px 0;
  }

  .y-axis-item {
    padding: 0 4px;
  }

  .x-axis-item,
  .y-axis-item,
  [part='cross-box'] {
    color: @grid-header-text-color;
    background-color: @grid-header-background-color;
  }
}