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

:host {
  display: block;
  margin-top: 20px;
}

.dt-event-chart-legend-symbol {
  display: inline-block;
  width: $dt-event-chart-event-height;
  height: $dt-event-chart-event-height;
}

// Event color styles
.dt-event-chart-legend-symbol
  ::ng-deep
  .dt-event-chart-legend-symbol-background {
  fill: $dt-event-chart-default-color;
}

.dt-event-chart-legend-symbol-conversion
  ::ng-deep
  .dt-event-chart-legend-symbol-background {
  fill: $dt-event-chart-conversion-color;
}

.dt-event-chart-legend-symbol-error
  ::ng-deep
  .dt-event-chart-legend-symbol-background {
  fill: $dt-event-chart-error-color;
}

.dt-event-chart-legend-symbol-filtered
  ::ng-deep
  .dt-event-chart-legend-symbol-background {
  fill: $dt-event-chart-filtered-color;
}

.dt-event-chart-legend-symbol-default
  ::ng-deep
  .dt-event-chart-legend-symbol-pattern {
  fill: url('#dt-event-chart-sausage-pattern-default');
}

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

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