.ui-density-compact,
:root[data-density="compact"] {
  --scaling: 0.92;
}

.ui-density-default,
:root[data-density="default"] {
  --scaling: 1;
}

.ui-density-comfortable,
:root[data-density="comfortable"] {
  --scaling: 1.08;
}

.ui-density-compact,
.ui-density-default,
.ui-density-comfortable {
  --space-1: calc(0.25rem * var(--scaling));
  --space-2: calc(0.5rem * var(--scaling));
  --space-3: calc(0.75rem * var(--scaling));
  --space-4: calc(1rem * var(--scaling));
  --space-5: calc(1.25rem * var(--scaling));
  --space-6: calc(1.5rem * var(--scaling));
  --space-8: calc(2rem * var(--scaling));
  --space-10: calc(2.5rem * var(--scaling));
  --space-12: calc(3rem * var(--scaling));
  --space-20: calc(5rem * var(--scaling));
  --space-24: calc(6rem * var(--scaling));
  --radius: calc(0.375rem * var(--scaling));
  --control-height: calc(var(--control-height-default) * var(--scaling));
  --control-height-sm: calc(var(--control-height) - calc(0.25rem * var(--scaling)));
  --control-height-lg: calc(var(--control-height) + calc(0.25rem * var(--scaling)));
  --control-height-xs: calc(var(--control-height) - calc(0.5rem * var(--scaling)));
  --control-icon-size: calc(var(--icon-size-md) * var(--scaling));
  --control-icon-size-sm: calc(var(--icon-size-sm) * var(--scaling));
  --control-padding-x: var(--space-3);
  --control-gap: var(--space-2);
  --control-gap-sm: var(--space-1);
  --checkbox-size: calc(1rem * var(--scaling));
  --switch-width: calc(2.25rem * var(--scaling));
  --switch-height: calc(1.25rem * var(--scaling));
  --switch-thumb-size: calc(1rem * var(--scaling));
  --switch-thumb-translate: calc(1rem * var(--scaling));
  --table-row-height: calc(var(--table-row-height-default) * var(--scaling));
  --table-cell-padding-y: var(--space-2);
  --phi-unit: var(--space-4);
  --space-page-x: var(--space-6);
  --space-page-y: var(--space-6);
  --space-section: var(--space-4);
  --space-section-band: var(--space-20);
  --space-section-hero: var(--space-24);
  --space-stack-xs: var(--space-1);
  --space-stack-sm: var(--space-2);
  --space-stack-md: var(--space-4);
  --space-stack-lg: var(--space-6);
  --space-stack-xl: var(--space-10);
  --space-inline-xs: var(--space-1);
  --space-inline-sm: var(--space-2);
  --space-inline-md: var(--space-3);
  --space-inline-lg: var(--space-4);

  --space-inline-xl: var(--space-6);
  --space-chrome-x: var(--space-6);
  --space-chrome-y: var(--space-4);
  --space-chrome-gap: var(--space-2);
  --field-label-gap: var(--space-2);
}