.wrapper {
  position: relative;
  flex: 1 1 0%;
}

.grid {
  position: absolute !important; /* prevent feedback loop with `useMeasure` on wrapper */
  z-index: 0; /* stacking context */
  color: var(--h5w-matrix--color, inherit);
  font-family: var(--h5w-matrix--fontFamily, monospace);
  font-size: var(--h5w-matrix--fontSize, inherit);
  scrollbar-width: thin;
}

.innerContainer {
  display: flex;
}

.colHeaders {
  display: flex;
}

.rowHeaders {
  display: flex;
  flex-direction: column;
}

.indexCell {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--h5w-matrix-indexCell--bgColor, #eee);
  color: var(--h5w-matrix-indexCell--color, var(--h5w-matrix--color, inherit));
  font-family: var(
    --h5w-matrix-indexCell--fontFamily,
    var(--h5w-matrix--fontFamily, monospace)
  );
  font-size: var(
    --h5w-matrix-indexCell--fontSize,
    var(--h5w-matrix--fontSize, inherit)
  );
  font-weight: var(--h5w-matrix-indexCell--fontWeight, 600);
}

.indexCell[data-bg] {
  background-color: var(--h5w-matrix-indexCell--bgColorAlt, lightgray);
}

.topLeftCell {
  composes: indexCell;
}

.stickyGrid[data-sticky] .colHeaders {
  position: sticky;
  top: 0;
  z-index: 2; /* above row header cells and content cells */
}

.stickyGrid[data-sticky] .rowHeaders {
  position: sticky;
  left: 0;
  z-index: 1; /* above content cells */
}

.stickyGrid[data-sticky] .topLeftCell {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 1; /* above column header cells */
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--h5w-matrix-cell--bgColor, transparent);
  overflow: hidden;
  white-space: nowrap;
}

.cell[data-bg] {
  background-color: var(--h5w-matrix-cell--bgColorAlt, #eee);
}