libs/barista-components/stacked-series-chart/src/_stacked-series-chart-shared.scss
@import '../../core/src/style/variables';

$gap-default: 16px;
$bar-track-size-default: 16px;
$column-extra-margin-default: 0;

$gap: var(--dt-stacked-series-chart-grid-gap);
$heat-field-gap: 1px;
$heat-field-size: 8px;
$heat-field-size-selected: 12px;
$hf-size-selected-margin: #{$heat-field-size-selected + 2px};
$heat-field-size-by-levels: calc(
  var(--dt-stacked-series-chart-heat-field-levels) * #{$hf-size-selected-margin}
);
$heat-field-margin-by-level: calc(
  var(--dt-stacked-series-chart-heat-field-level) * #{$hf-size-selected-margin}
);
$heat-field-border-radius: 2px;
$heat-field-margin: 4px;
$bullet-height: 12px;
$track-color: $gray-200;
$selected-size: 4px;
$selected-color: rgba($turquoise-500, 0.2);
$selected-border-color: $turquoise-500;
$selected-border-size: 1px;
$hover-transition-time: 0.1s;
$hidden-color: $gray-300;
$axis-color: $gray-300;
$axis-width: 1px;
$tick-gutter: 16px;
$tick-length: 8px;
$hidden-transition-time: 0.2s;
$hover-opacity: 0.8;

@mixin gridPosition($property, $label, $chart) {
  .dt-stacked-series-chart-track-label {
    #{$property}: $label;
  }
  .dt-stacked-series-chart-track {
    #{$property}: $chart;
  }
}

@mixin fullWidthAxis {
  position: relative;
  top: var(--dt-stacked-series-chart-tick-position);
  left: 0;
  transform: translate(0%, -50%);

  display: flex;
  height: 1em;
  align-items: center;

  grid-row: 1;
  grid-column: 1;

  white-space: nowrap;
}

@mixin trackAxisContainerMinSize($property, $size, $margin-a, $margin-b) {
  #{$property}: calc(#{$size} + #{$margin-a} + #{$margin-b});
}
