.ColorTable {
  display: flex;
  flex-wrap: wrap;

  gap: var(--grid-tiny);
}

.ColorTable .color-info {
  --color-info-size: 50px;

  display: flex;
  flex-direction: column;
  align-items: end;
  border-radius: var(--border-radius);

  inline-size: var(--color-info-size);
  aspect-ratio: 1;
  box-sizing: content-box;

  padding: var(--grid-mult);

  font-size: var(--fs-small);

  border: 2px solid transparent;
}

.ColorTable .color-info:hover {
  background-color: var(--theme-background-off);
}

.ColorTable .color-info[data-active] {
  background-color: var(--theme-background-light);
  border-color: var(--c-primary);
}

.ColorTable .color-info > .PartImage {
  --part-inline-size: var(--color-info-size);
  --part-padding: var(--grid-tiny);
  border-radius: var(--border-radius-small);
}

.ColorTable .color-info > .color-info-count {
  font-weight: bold;
  font-variant-numeric: tabular-nums;

  background-color: var(--theme-blur-c);
  -webkit-backdrop-filter: blur(var(--theme-blur-px));
  backdrop-filter: blur(var(--theme-blur-px));

  border-radius: 2em;
  padding-inline: var(--grid-tiny);
  margin-block-start: -2ex;
  z-index: 1;
}