[data-heatmap] {
  --heatmap-cell-size: 0.4rem;
  --heatmap-gap: 2px;

  position: relative;
  min-width: 0;
  overflow: hidden;
}

[data-heatmap-shape="square"] {
  aspect-ratio: 1;
}

[data-heatmap-cell] {
  position: absolute;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  background: var(--color);
  transition: opacity 150ms;

  &[data-muted] {
    opacity: 0.12;
  }
}

[data-heatmap="bottom"] > [data-heatmap-cell] {
  bottom: var(--y);
}

[data-heatmap=""] > [data-heatmap-cell] {
  top: var(--y);
}

[data-heatmap-measure] {
  position: absolute;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}