$sizes: (
  "null": 0,
  "xxs": var(--xxs-size),
  "xs": var(--xs-size),
  "sm": var(--sm-size),
  "semi-md": var(--semi-md-size),
  "md": var(--md-size),
  "semi-lg": var(--semi-lg-size),
  "lg": var(--lg-size),
  "xlg": var(--xlg-size),
  "semi-xxlg": var(--semi-xxlg-size),
  "xxlg": var(--xxlg-size),
  "mega": var(--mega-size),
  "xl-mega": var(--xl-mega-size),
  "--xxl-mega": var(--xxl-mega-size),
);

:root {
  --base-size: 8px;
  --xxs-size: calc(var(--base-size) / 4); // 2
  --xs-size: calc(var(--base-size) / 2); // 4
  --semi-sm-size: calc(var(--base-size) * 0.75); // 6
  --sm-size: calc(var(--base-size) * 1); // 8
  --semi-md-size: calc(var(--base-size) * 1.5); // 12
  --md-size: calc(var(--base-size) * 2); // 16
  --xmd-size: calc(var(--base-size) * 2.25); // 18
  --semi-lg-size: calc(var(--base-size) * 2.5); // 20
  --lg-size: calc(var(--base-size) * 3); // 24
  --xlg-size: calc(var(--base-size) * 4); // 32
  --temp-xxlg-size: calc(var(--base-size) * 4.25); // 34
  --semi-xxlg-size: calc(var(--base-size) * 4.5); // 36
  --xxlg-size: calc(var(--base-size) * 5); // 40
  --mega-size: calc(var(--base-size) * 6); // 48
  --x-mega-size: calc(var(--base-size) * 7.5); // 60
  --l-mega-size: calc(var(--base-size) * 8); // 64
  --xl-mega-size: calc(var(--base-size) * 16); // 128
  --xxl-mega-size: calc(var(--base-size) * 35); // 280

  // Reverse
  --xxs-size-reverse: calc(var(--base-size) / 4); // -2
  --xs-size-reverse: calc(var(--base-size) / 2); // -4
  --semi-sm-size-reverse: calc(-1 * var(--base-size) * 0.75); // -6
  --sm-size-reverse: calc(-1 * var(--base-size) * 1); // -8
  --semi-md-size-reverse: calc(-1 * var(--base-size) * 2); // -12
  --md-size-reverse: calc(-1 * var(--base-size) * 2); // -16
  --semi-lg-size-reverse: calc(-1 * var(--base-size) * 2.5); // -20
  --lg-size-reverse: calc(-1 * var(--base-size) * 3); // -24
  --xlg-size-reverse: calc(-1 * var(--base-size) * 4); // -32
}