.mapper {
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 1rem 0.375rem 1rem 0.375rem;
  background-color: var(--primary-light-bg);
  overflow: hidden auto;
  font-size: 0.875em;
  scrollbar-width: thin;
}

.axisMapperWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.axisMapper {
  display: flex;
  align-items: center;
  margin-bottom: 0.375rem;
  padding-left: 0.25rem;
}

.axisLabel {
  margin-right: 0.125rem;
  font-family: math;
  font-size: 1.25em;
  font-style: italic;
  font-weight: bold;
  line-height: calc(1.2 / 1.25); /* reduce height proportionally to font-size */
}

.dims {
  composes: axisMapper;
  padding-right: 0.25rem;
}

.dimsLabel {
  composes: axisLabel;
  margin-right: 0.25rem;
}

.dimSize {
  flex: 1 0 0%;
  padding: 0 0.1875rem;
  text-align: center;
}

.sliders {
  flex: 1 1 0%;
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}