libs/barista-components/chart/src/heatfield/chart-heatfield.scss
@import '../../../core/src/style/variables';
@import '../../../core/src/style/overlay';

$animation-duration: 150ms;
$animation-delay: 40ms;

.dt-chart-heatfield-marker {
  height: 8px;
  outline: 2px solid #ffffff;
  border-radius: 3px;
  margin-bottom: 2px;
  position: absolute;
  cursor: pointer;
  border: none;
  width: 100%;
  display: block;
  z-index: 1;
  transform-origin: top;
  transition: transform $animation-duration ease-in-out $animation-delay;
  min-width: 8px;
}

.dt-chart-heatfield-marker.dt-chart-heatfield-active {
  transform: scaleY(1.5);
  transition: transform 50ms ease-in-out;
}

.dt-chart-heatfield-backdrop {
  position: absolute;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform $animation-duration ease-out;
}

.dt-chart-heatfield-active + .dt-chart-heatfield-backdrop {
  transform: scaleY(1);
  transition: transform $animation-duration ease-out $animation-delay;
}

.dt-chart-heatfield-overlay {
  @include dt-overlay-container();
}

.dt-chart-heatfield-content {
  display: inline-block;
}

.dt-heatfield-close-trigger {
  border: none;
  float: right;
  // Ignore parent padding for optimum close button positioning
  margin-right: -$overlay-container-padding;
  margin-top: -$overlay-container-padding;
}

@import './chart-heatfield-theme';
