:root {
  --size-none: 0;
  --size-neutral: 0.25rem;
  --size-small: 0.5rem;
  --size-medium: 1rem;
  --size-large: 2rem;
  --size-x-large: 3rem;
  --size-xx-large: 4rem;
  --size-xxx-large: 6rem;
  --size-xxxx-large: 8rem;
}

.size-width--none        { width: var(--size-none) !important; }
.size-width--neutral     { width: var(--size-neutral) !important; }
.size-width--small       { width: var(--size-small) !important; }
.size-width--medium      { width: var(--size-medium) !important; }
.size-width--large       { width: var(--size-large) !important; }
.size-width--x-large     { width: var(--size-x-large) !important; }
.size-width--xx-large    { width: var(--size-xx-large) !important; }
.size-width--xxx-large   { width: var(--size-xxx-large) !important; }
.size-width--xxxx-large  { width: var(--size-xxxx-large) !important; }

.size-height--none        { height: var(--size-none) !important; }
.size-height--neutral     { height: var(--size-neutral) !important; }
.size-height--small       { height: var(--size-small) !important; }
.size-height--medium      { height: var(--size-medium) !important; }
.size-height--large       { height: var(--size-large) !important; }
.size-height--x-large     { height: var(--size-x-large) !important; }
.size-height--xx-large    { height: var(--size-xx-large) !important; }
.size-height--xxx-large   { height: var(--size-xxx-large) !important; }
.size-height--xxxx-large  { height: var(--size-xxxx-large) !important; }