.dimensions-selection-container {
  width: 100%;
  overflow: auto;
}

#dimensions-selection {
  --cell-size: 35px;
  --cell-text-color-unclickable: var(--body-text-color-muted);
  --cell-background-color-hover: #e6e0da;
  --cell-background-color-active: #dad0c7;
  --cell-background-color-selected: #cdc0b4;
  --cell-background-color-unclickable: #eeeeee;
  border-collapse: collapse;
}

#dimensions-selection td {
  padding: 0;
  border: 1px solid var(--box-border-color);
}

.dimensions {
  width: var(--cell-size);
  height: var(--cell-size);
  padding: 0;
  color: var(--body-text-color);
  background-color: var(--input-background-color);
  border-radius: 0;
  line-height: var(--cell-size);
  font-size: calc(var(--cell-size) / 4);
}

.dimensions:hover {
  background-color: var(--cell-background-color-hover);
}

.dimensions:active {
  background-color: var(--cell-background-color-active);
}

.dimensions.selected {
  background-color: var(--cell-background-color-selected);
}

.dimensions.disabled {
  color: var(--cell-text-color-unclickable);
  background-color: var(--cell-background-color-unclickable);
  pointer-events: none;
}