libs/barista-components/stacked-series-chart/src/stacked-series-chart.scss
@import '../../core/src/style/overlay';
@import './stacked-series-chart-shared';
/** HOW TO of layout

See stacked-series-chart.layout.md
*/

:host {
  --dt-stacked-series-chart-grid-gap: #{$gap-default};
  --dt-stacked-series-chart-max-bar-size: #{$bar-track-size-default};

  display: grid;
  align-items: center;
  grid-template-rows: 1fr auto;

  &.dt-stacked-series-chart-with-legend {
    gap: $tick-gutter;
  }
}

/** Chart orientation */
.dt-stacked-series-chart-container {
  display: grid;
  grid-auto-flow: dense;
  align-self: stretch;
  gap: $tick-gutter;
}

/** Track */
.dt-stacked-series-chart-track {
  display: flex;
}
.dt-stacked-series-chart-track-background {
  background: $track-color;
}

.dt-stacked-series-chart-track-selectable {
  cursor: pointer;
}

.dt-stacked-series-chart-slice {
  background: var(--dt-stacked-series-chart-color);
  box-sizing: content-box;
  transition: width $hidden-transition-time, height $hidden-transition-time,
    opacity $hover-transition-time;
}

.dt-stacked-series-chart-track-hoverable {
  .dt-stacked-series-chart-slice-selectable {
    cursor: pointer;
  }

  .dt-stacked-series-chart-slice:hover {
    opacity: $hover-opacity;
  }
}

/** Slice **/
.dt-stacked-series-chart-node .dt-stacked-series-chart-slice-selected,
.dt-stacked-series-chart-track-selected.dt-stacked-series-chart-stack {
  position: relative;

  &::before {
    content: ' ';
    display: block;
    position: absolute;
    border: $selected-border-size solid $selected-border-color;
    border-radius: 3px;
  }
}

/** Axis */
.dt-stacked-series-chart-axis-tick {
  position: absolute;

  &::after {
    position: absolute;
    display: block;
    background: $axis-color;
    width: $axis-width;
    height: $axis-width;
    content: ' ';
  }
}

.dt-stacked-series-chart-track-label {
  text-align: center;
}

.dt-stacked-series-chart-track-label-content {
  outline: none;
}

.dt-stacked-series-chart-track-label-default {
  opacity: 0;
}

/** Heat fields */
.dt-stacked-series-chart-heat-field {
  position: absolute;
  border-radius: $heat-field-border-radius;
  background-color: var(--dt-stacked-series-chart-heat-field-color);

  cursor: pointer;
}

.dt-stacked-series-chart-heat-field-area {
  position: absolute;
  border-radius: $heat-field-border-radius;
  background-color: var(--dt-stacked-series-chart-heat-field-color);
  opacity: 0.125;
}

/** Legend */
.dt-stacked-series-chart-legend {
  display: flex;
  padding: 0;
  justify-self: center;
}

.dt-stacked-series-chart-legend-symbol {
  display: block;
  height: $bullet-height;
  width: $bullet-height;
  background: var(--dt-stacked-series-chart-color);
  transition: background $hidden-transition-time;

  &:hover {
    opacity: $hover-opacity;
  }
}

.dt-legend-item {
  cursor: pointer;
}

.dt-stacked-series-chart-legend-item-hidden {
  .dt-stacked-series-chart-legend-symbol {
    background: $hidden-color;
  }
}

/** Stacked series 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-stacked-series-chart-overlay-panel {
  @include dt-overlay-container();
}
