libs/barista-components/event-chart/src/event-chart.scss
@import '../../core/src/style/variables';
@import '../../core/src/style/overlay';
@import './event-chart-constants';
@import '../../core/src/style/interactive-common';

:host {
  display: block;
}

.dt-event-chart-container {
  display: flex;
  width: 100%;
}

.dt-event-chart-lane-labels {
  flex-grow: 0;
  flex-shrink: 1;
  padding-right: $dt-event-chart-event-height;
}

.dt-event-chart-lane-label {
  display: flex;
  height: $dt-event-chart-lane-height + 1;
  align-items: center;
  overflow: hidden;
}

.dt-event-chart-canvas {
  flex-grow: 1;
  flex-shrink: 1;

  // Do not remove
  width: 100%;
  overflow: hidden;
}

.dt-event-chart-canvas-svg {
  width: 100%;
}

.dt-event-chart-grid-line {
  stroke: $dt-event-chart-grid-color;
  stroke-width: 1;
}

.dt-event-chart-tick-label {
  fill: $textcolor;
}

.dt-event-chart-path {
  fill: none;
  stroke: $dt-event-chart-path-color;
  stroke-width: 2;
}

// Single chart event
.dt-event-chart-event {
  stroke-width: 4;
  paint-order: stroke fill;
  stroke: #ffffff;
  fill: $dt-event-chart-default-color;
  cursor: pointer;

  &:hover {
    stroke: $dt-event-chart-hover-color;
    stroke-width: $dt-event-chart-hover-spread;
  }
  &:focus {
    @include dt-interactive-reset();
  }
}

// Single chart field
.dt-event-chart-field {
  stroke-width: 4;
  paint-order: stroke fill;
  stroke: #ffffff;
  fill: $dt-event-chart-default-color;
  cursor: pointer;

  &:focus {
    @include dt-interactive-reset();
  }
}

.dt-event-chart-rect {
  paint-order: fill;
  fill: $dt-event-chart-default-color;
  opacity: 0.125;
  z-index: 200;
}

.dt-event-chart-style-selectedoutline {
  stroke: $dt-event-chart-select-color;
  stroke-width: 2;
  fill: #ffffff;
}

.dt-event-chart-style-error {
  fill: $dt-event-chart-error-color;
}

.dt-event-chart-style-filtered {
  fill: $dt-event-chart-filtered-color;
}

.dt-event-chart-style-conversion {
  fill: $dt-event-chart-conversion-color;
}

.dt-event-chart-style-mergednumber {
  fill: #ffffff;
  pointer-events: none;
  font-size: 10;
  text-anchor: middle;
  font-weight: bold;
}

// Duration events
.dt-event-chart-event-pattern-default {
  fill: url('#dt-event-chart-sausage-pattern-default');
}

.dt-event-chart-event-pattern-error {
  fill: url('#dt-event-chart-sausage-pattern-error');
}

.dt-event-chart-event-pattern-conversion {
  fill: url('#dt-event-chart-sausage-pattern-conversion');
}

.dt-event-chart-event-pattern-filtered {
  fill: url('#dt-event-chart-sausage-pattern-filtered');
}

// Legend bubbles
::ng-deep .dt-event-chart-sausage-pattern-default {
  .dt-event-chart-sausage-pattern-bg {
    fill: $dt-event-chart-default-color;
  }

  .dt-event-chart-sausage-pattern-strokes {
    stroke: $dt-event-chart-default-color-alt;
  }
}

::ng-deep .dt-event-chart-sausage-pattern-error {
  .dt-event-chart-sausage-pattern-bg {
    fill: $dt-event-chart-error-color-alt;
  }

  .dt-event-chart-sausage-pattern-strokes {
    stroke: $dt-event-chart-error-color;
  }
}

::ng-deep .dt-event-chart-sausage-pattern-conversion {
  .dt-event-chart-sausage-pattern-bg {
    fill: $dt-event-chart-conversion-color-alt;
  }

  .dt-event-chart-sausage-pattern-strokes {
    stroke: $dt-event-chart-conversion-color;
  }
}

::ng-deep .dt-event-chart-sausage-pattern-filtered {
  .dt-event-chart-sausage-pattern-bg {
    fill: $dt-event-chart-filtered-color-alt;
  }

  .dt-event-chart-sausage-pattern-strokes {
    stroke: $dt-event-chart-filtered-color;
  }
}

::ng-deep .dt-event-chart-sausage-pattern-hovered {
  .dt-event-chart-sausage-pattern-bg {
    stroke: $dt-event-chart-hover-color;
    stroke-width: $dt-event-chart-hover-spread;
  }
}

/** Event chart overlay */
/** The selector is combined with the cdk-overlay-pane to
increase the specificity to avoid edge cases where the cdk styles
are loaded after the component's styles in the angular.json */
::ng-deep .cdk-overlay-pane.dt-event-chart-overlay-panel {
  @include dt-overlay-container();
}
