index.css

:root {
  --global-hue:          240;
  --global-saturation:   60%;
  --global-lightness:    60%;
  --global-alpha:        1.0;
}

/**
 * For the four attributes which take color-related values,
 * as well as `color` itself,
 * take the HSL-related values.
 */
[background~=primary]    { --background-hue: var(--hue-primary);    }
[background~=accent]     { --background-hue: var(--hue-accent);  }
[background~=success]    { --background-hue: var(--hue-success);    }
[background~=warn]       { --background-hue: var(--hue-warn);       }
[background~=error]      { --background-hue: var(--hue-error);      }
[background~=red]        { --background-hue: orange;   }
[background~=0]        { --background-hue: 30;   }
[background~=xx-bright]  { --background-saturation: 100%; }
[background~=x-bright]   { --background-saturation: 80%;  }
[background~=bright]     { --background-saturation: 60%;  }
[background~=medium-bright] { --background-saturation: 50%; }
[background~=dull]       { --background-saturation: 40%;  }
[background~=x-dull]     { --background-saturation: 20%;  }
[background~=xx-dull]    { --background-saturation: 0%;   }
/* completely gray */
[background~=xx-light]   { --background-lightness: 100%; }
[background~=x-light]    { --background-lightness: 80%;  }
[background~=light]      { --background-lightness: 60%;  }
[background~=medium-light] { --background-lightness: 50%; }
[background~=dark]       { --background-lightness: 40%;  }
[background~=x-dark]     { --background-lightness: 20%;  }
[background~=xx-dark]    { --background-lightness: 0%;   }
/* completely black */
[background~=opaque]        { --background-alpha: 1.0; }
[background~=translucent]   { --background-alpha: 0.8; }
[background~=x-translucent] { --background-alpha: 0.6; }
[background~=transparent]   { --background-alpha: 0;   }
[border~=primary]    { --border-hue: var(--hue-primary);    }
[border~=accent]     { --border-hue: var(--hue-accent);  }
[border~=success]    { --border-hue: var(--hue-success);    }
[border~=warn]       { --border-hue: var(--hue-warn);       }
[border~=error]      { --border-hue: var(--hue-error);      }
[border~=red]        { --border-hue: orange;   }
[border~=0]        { --border-hue: 30;   }
[border~=xx-bright]  { --border-saturation: 100%; }
[border~=x-bright]   { --border-saturation: 80%;  }
[border~=bright]     { --border-saturation: 60%;  }
[border~=medium-bright] { --border-saturation: 50%; }
[border~=dull]       { --border-saturation: 40%;  }
[border~=x-dull]     { --border-saturation: 20%;  }
[border~=xx-dull]    { --border-saturation: 0%;   }
/* completely gray */
[border~=xx-light]   { --border-lightness: 100%; }
[border~=x-light]    { --border-lightness: 80%;  }
[border~=light]      { --border-lightness: 60%;  }
[border~=medium-light] { --border-lightness: 50%; }
[border~=dark]       { --border-lightness: 40%;  }
[border~=x-dark]     { --border-lightness: 20%;  }
[border~=xx-dark]    { --border-lightness: 0%;   }
/* completely black */
[border~=opaque]        { --border-alpha: 1.0; }
[border~=translucent]   { --border-alpha: 0.8; }
[border~=x-translucent] { --border-alpha: 0.6; }
[border~=transparent]   { --border-alpha: 0;   }
[box-shadow~=primary]    { --box-shadow-hue: var(--hue-primary);    }
[box-shadow~=accent]     { --box-shadow-hue: var(--hue-accent);  }
[box-shadow~=success]    { --box-shadow-hue: var(--hue-success);    }
[box-shadow~=warn]       { --box-shadow-hue: var(--hue-warn);       }
[box-shadow~=error]      { --box-shadow-hue: var(--hue-error);      }
[box-shadow~=red]        { --box-shadow-hue: orange;   }
[box-shadow~=0]        { --box-shadow-hue: 30;   }
[box-shadow~=xx-bright]  { --box-shadow-saturation: 100%; }
[box-shadow~=x-bright]   { --box-shadow-saturation: 80%;  }
[box-shadow~=bright]     { --box-shadow-saturation: 60%;  }
[box-shadow~=medium-bright] { --box-shadow-saturation: 50%; }
[box-shadow~=dull]       { --box-shadow-saturation: 40%;  }
[box-shadow~=x-dull]     { --box-shadow-saturation: 20%;  }
[box-shadow~=xx-dull]    { --box-shadow-saturation: 0%;   }
/* completely gray */
[box-shadow~=xx-light]   { --box-shadow-lightness: 100%; }
[box-shadow~=x-light]    { --box-shadow-lightness: 80%;  }
[box-shadow~=light]      { --box-shadow-lightness: 60%;  }
[box-shadow~=medium-light] { --box-shadow-lightness: 50%; }
[box-shadow~=dark]       { --box-shadow-lightness: 40%;  }
[box-shadow~=x-dark]     { --box-shadow-lightness: 20%;  }
[box-shadow~=xx-dark]    { --box-shadow-lightness: 0%;   }
/* completely black */
[box-shadow~=opaque]        { --box-shadow-alpha: 1.0; }
[box-shadow~=translucent]   { --box-shadow-alpha: 0.8; }
[box-shadow~=x-translucent] { --box-shadow-alpha: 0.6; }
[box-shadow~=transparent]   { --box-shadow-alpha: 0;   }
[color~=primary]    { --color-hue: var(--hue-primary);    }
[color~=accent]     { --color-hue: var(--hue-accent);  }
[color~=success]    { --color-hue: var(--hue-success);    }
[color~=warn]       { --color-hue: var(--hue-warn);       }
[color~=error]      { --color-hue: var(--hue-error);      }
[color~=red]        { --color-hue: orange;   }
[color~=0]        { --color-hue: 30;   }
[color~=xx-bright]  { --color-saturation: 100%; }
[color~=x-bright]   { --color-saturation: 80%;  }
[color~=bright]     { --color-saturation: 60%;  }
[color~=medium-bright] { --color-saturation: 50%; }
[color~=dull]       { --color-saturation: 40%;  }
[color~=x-dull]     { --color-saturation: 20%;  }
[color~=xx-dull]    { --color-saturation: 0%;   }
/* completely gray */
[color~=xx-light]   { --color-lightness: 100%; }
[color~=x-light]    { --color-lightness: 80%;  }
[color~=light]      { --color-lightness: 60%;  }
[color~=medium-light] { --color-lightness: 50%; }
[color~=dark]       { --color-lightness: 40%;  }
[color~=x-dark]     { --color-lightness: 20%;  }
[color~=xx-dark]    { --color-lightness: 0%;   }
/* completely black */
[color~=opaque]        { --color-alpha: 1.0; }
[color~=translucent]   { --color-alpha: 0.8; }
[color~=x-translucent] { --color-alpha: 0.6; }
[color~=transparent]   { --color-alpha: 0;   }
[text~=primary]    { --text-hue: var(--hue-primary);    }
[text~=accent]     { --text-hue: var(--hue-accent);  }
[text~=success]    { --text-hue: var(--hue-success);    }
[text~=warn]       { --text-hue: var(--hue-warn);       }
[text~=error]      { --text-hue: var(--hue-error);      }
[text~=red]        { --text-hue: orange;   }
[text~=0]        { --text-hue: 30;   }
[text~=xx-bright]  { --text-saturation: 100%; }
[text~=x-bright]   { --text-saturation: 80%;  }
[text~=bright]     { --text-saturation: 60%;  }
[text~=medium-bright] { --text-saturation: 50%; }
[text~=dull]       { --text-saturation: 40%;  }
[text~=x-dull]     { --text-saturation: 20%;  }
[text~=xx-dull]    { --text-saturation: 0%;   }
/* completely gray */
[text~=xx-light]   { --text-lightness: 100%; }
[text~=x-light]    { --text-lightness: 80%;  }
[text~=light]      { --text-lightness: 60%;  }
[text~=medium-light] { --text-lightness: 50%; }
[text~=dark]       { --text-lightness: 40%;  }
[text~=x-dark]     { --text-lightness: 20%;  }
[text~=xx-dark]    { --text-lightness: 0%;   }
/* completely black */
[text~=opaque]        { --text-alpha: 1.0; }
[text~=translucent]   { --text-alpha: 0.8; }
[text~=x-translucent] { --text-alpha: 0.6; }
[text~=transparent]   { --text-alpha: 0;   }
[text-shadow~=primary]    { --text-shadow-hue: var(--hue-primary);    }
[text-shadow~=accent]     { --text-shadow-hue: var(--hue-accent);  }
[text-shadow~=success]    { --text-shadow-hue: var(--hue-success);    }
[text-shadow~=warn]       { --text-shadow-hue: var(--hue-warn);       }
[text-shadow~=error]      { --text-shadow-hue: var(--hue-error);      }
[text-shadow~=red]        { --text-shadow-hue: orange;   }
[text-shadow~=0]        { --text-shadow-hue: 30;   }
[text-shadow~=xx-bright]  { --text-shadow-saturation: 100%; }
[text-shadow~=x-bright]   { --text-shadow-saturation: 80%;  }
[text-shadow~=bright]     { --text-shadow-saturation: 60%;  }
[text-shadow~=medium-bright] { --text-shadow-saturation: 50%; }
[text-shadow~=dull]       { --text-shadow-saturation: 40%;  }
[text-shadow~=x-dull]     { --text-shadow-saturation: 20%;  }
[text-shadow~=xx-dull]    { --text-shadow-saturation: 0%;   }
/* completely gray */
[text-shadow~=xx-light]   { --text-shadow-lightness: 100%; }
[text-shadow~=x-light]    { --text-shadow-lightness: 80%;  }
[text-shadow~=light]      { --text-shadow-lightness: 60%;  }
[text-shadow~=medium-light] { --text-shadow-lightness: 50%; }
[text-shadow~=dark]       { --text-shadow-lightness: 40%;  }
[text-shadow~=x-dark]     { --text-shadow-lightness: 20%;  }
[text-shadow~=xx-dark]    { --text-shadow-lightness: 0%;   }
/* completely black */
[text-shadow~=opaque]        { --text-shadow-alpha: 1.0; }
[text-shadow~=translucent]   { --text-shadow-alpha: 0.8; }
[text-shadow~=x-translucent] { --text-shadow-alpha: 0.6; }
[text-shadow~=transparent]   { --text-shadow-alpha: 0;   }

/**
 * The four attributes which take color-related values also support relative values of HSL.
 * This does not apply to `color`, since at present CSS custom properties provide no way to access parent value.
 */
[background] {
    --background-hue: var(--global-hue);
    --background-saturation: var(--global-saturation);
    --background-lightness: var(--global-lightness);
    --background-alpha: var(--global-alpha);
  }
[background~=brighter]   { --background-saturation: calc(var(--global-saturation) + 10%); }
[background~=duller]     { --background-saturation: calc(var(--global-saturation) - 10%); }
[background~=x-brighter] { --background-saturation: calc(var(--global-saturation) + 20%); }
[background~=x-duller]   { --background-saturation: calc(var(--global-saturation) - 20%); }
[background~=lighter]    { --background-lightness: calc(var(--global-lightness) + 10%); }
[background~=x-lighter]  { --background-lightness: calc(var(--global-lightness) + 20%); }
[background~=darker]     { --background-lightness: calc(var(--global-lightness) - 10%); }
[background~=x-darker]   { --background-lightness: calc(var(--global-lightness) - 20%); }
[background~=more-opaque]    { --background-alpha: calc(var(--global-alpha) + 0.1); }
[background~=less-opaque]    { --background-alpha: calc(var(--global-alpha) - 0.1); }
[border] {
    --border-hue: var(--global-hue);
    --border-saturation: var(--global-saturation);
    --border-lightness: var(--global-lightness);
    --border-alpha: var(--global-alpha);
  }
[border~=brighter]   { --border-saturation: calc(var(--global-saturation) + 10%); }
[border~=duller]     { --border-saturation: calc(var(--global-saturation) - 10%); }
[border~=x-brighter] { --border-saturation: calc(var(--global-saturation) + 20%); }
[border~=x-duller]   { --border-saturation: calc(var(--global-saturation) - 20%); }
[border~=lighter]    { --border-lightness: calc(var(--global-lightness) + 10%); }
[border~=x-lighter]  { --border-lightness: calc(var(--global-lightness) + 20%); }
[border~=darker]     { --border-lightness: calc(var(--global-lightness) - 10%); }
[border~=x-darker]   { --border-lightness: calc(var(--global-lightness) - 20%); }
[border~=more-opaque]    { --border-alpha: calc(var(--global-alpha) + 0.1); }
[border~=less-opaque]    { --border-alpha: calc(var(--global-alpha) - 0.1); }
[box-shadow] {
    --box-shadow-hue: var(--global-hue);
    --box-shadow-saturation: var(--global-saturation);
    --box-shadow-lightness: var(--global-lightness);
    --box-shadow-alpha: var(--global-alpha);
  }
[box-shadow~=brighter]   { --box-shadow-saturation: calc(var(--global-saturation) + 10%); }
[box-shadow~=duller]     { --box-shadow-saturation: calc(var(--global-saturation) - 10%); }
[box-shadow~=x-brighter] { --box-shadow-saturation: calc(var(--global-saturation) + 20%); }
[box-shadow~=x-duller]   { --box-shadow-saturation: calc(var(--global-saturation) - 20%); }
[box-shadow~=lighter]    { --box-shadow-lightness: calc(var(--global-lightness) + 10%); }
[box-shadow~=x-lighter]  { --box-shadow-lightness: calc(var(--global-lightness) + 20%); }
[box-shadow~=darker]     { --box-shadow-lightness: calc(var(--global-lightness) - 10%); }
[box-shadow~=x-darker]   { --box-shadow-lightness: calc(var(--global-lightness) - 20%); }
[box-shadow~=more-opaque]    { --box-shadow-alpha: calc(var(--global-alpha) + 0.1); }
[box-shadow~=less-opaque]    { --box-shadow-alpha: calc(var(--global-alpha) - 0.1); }
[outline] {
    --outline-hue: var(--global-hue);
    --outline-saturation: var(--global-saturation);
    --outline-lightness: var(--global-lightness);
    --outline-alpha: var(--global-alpha);
  }
[outline~=brighter]   { --outline-saturation: calc(var(--global-saturation) + 10%); }
[outline~=duller]     { --outline-saturation: calc(var(--global-saturation) - 10%); }
[outline~=x-brighter] { --outline-saturation: calc(var(--global-saturation) + 20%); }
[outline~=x-duller]   { --outline-saturation: calc(var(--global-saturation) - 20%); }
[outline~=lighter]    { --outline-lightness: calc(var(--global-lightness) + 10%); }
[outline~=x-lighter]  { --outline-lightness: calc(var(--global-lightness) + 20%); }
[outline~=darker]     { --outline-lightness: calc(var(--global-lightness) - 10%); }
[outline~=x-darker]   { --outline-lightness: calc(var(--global-lightness) - 20%); }
[outline~=more-opaque]    { --outline-alpha: calc(var(--global-alpha) + 0.1); }
[outline~=less-opaque]    { --outline-alpha: calc(var(--global-alpha) - 0.1); }
[text] {
    --text-hue: var(--global-hue);
    --text-saturation: var(--global-saturation);
    --text-lightness: var(--global-lightness);
    --text-alpha: var(--global-alpha);
  }
[text~=brighter]   { --text-saturation: calc(var(--global-saturation) + 10%); }
[text~=duller]     { --text-saturation: calc(var(--global-saturation) - 10%); }
[text~=x-brighter] { --text-saturation: calc(var(--global-saturation) + 20%); }
[text~=x-duller]   { --text-saturation: calc(var(--global-saturation) - 20%); }
[text~=lighter]    { --text-lightness: calc(var(--global-lightness) + 10%); }
[text~=x-lighter]  { --text-lightness: calc(var(--global-lightness) + 20%); }
[text~=darker]     { --text-lightness: calc(var(--global-lightness) - 10%); }
[text~=x-darker]   { --text-lightness: calc(var(--global-lightness) - 20%); }
[text~=more-opaque]    { --text-alpha: calc(var(--global-alpha) + 0.1); }
[text~=less-opaque]    { --text-alpha: calc(var(--global-alpha) - 0.1); }
[text-shadow] {
    --text-shadow-hue: var(--global-hue);
    --text-shadow-saturation: var(--global-saturation);
    --text-shadow-lightness: var(--global-lightness);
    --text-shadow-alpha: var(--global-alpha);
  }
[text-shadow~=brighter]   { --text-shadow-saturation: calc(var(--global-saturation) + 10%); }
[text-shadow~=duller]     { --text-shadow-saturation: calc(var(--global-saturation) - 10%); }
[text-shadow~=x-brighter] { --text-shadow-saturation: calc(var(--global-saturation) + 20%); }
[text-shadow~=x-duller]   { --text-shadow-saturation: calc(var(--global-saturation) - 20%); }
[text-shadow~=lighter]    { --text-shadow-lightness: calc(var(--global-lightness) + 10%); }
[text-shadow~=x-lighter]  { --text-shadow-lightness: calc(var(--global-lightness) + 20%); }
[text-shadow~=darker]     { --text-shadow-lightness: calc(var(--global-lightness) - 10%); }
[text-shadow~=x-darker]   { --text-shadow-lightness: calc(var(--global-lightness) - 20%); }
[text-shadow~=more-opaque]    { --text-shadow-alpha: calc(var(--global-alpha) + 0.1); }
[text-shadow~=less-opaque]    { --text-shadow-alpha: calc(var(--global-alpha) - 0.1); }

/* BACKGROUND */

[background][color] {
  background-color: var(--color);
}

[background~=cover]   { background-size: cover; }
[background~=contain] { background-size: contain; }

/* background image -- use with style="--image: url(...)" */
[background~=image]   { background-image: var(--image); }

/* background colors */
[background~=color]      { background-color: hsla(var(--background-hue), var(--background-saturation), var(--background-lightness), var(--background-alpha)); }

/* BORDER */

/* .widths */
:root {
  --border-width-default:      medium;
  --border-style-default:      solid;
}

[border] {
  --border-width:      var(--border-width-default);
  --border-style:      var(--border-style-default);
  --border-hue:        var(--global-hue);
  --border-saturation: var(--global-saturation);
  --border-lightness:  var(--global-lightness);
  --border-alpha:      var(--global-alpha);

  border-color: hsla(var(--border-hue, --global-hue), var(--border-saturation), var(--border-lightness), var(--border-alpha));
  border-width: var(--border-width);
}

/* border width */
[border~=medium]     { --border-width: medium; }
[border~=thin]     { --border-width: thin; }
[border~=thick]     { --border-width: thick; }

[border~=solid]     { --border-style: solid; }

[border~=dotted]     { --border-style: dotted; }

[border~=dashed]     { --border-style: dashed; }

[border~=groove]     { --border-style: groove; }

[border~=ridge]     { --border-style: ridge; }

[border~=inset]     { --border-style: inset; }

[border~=outset]     { --border-style: outset; }

[border~=none]     { --border-style: none; }

/* border radius */
[border~=rounded]   { border-radius: 0.5em; }
[border~=x-rounded] { border-radius: 1.0em; }

/* border sides */
[border~=left]      { border-left-style:   var(--border-style); }
[border~=right]     { border-right-style:  var(--border-style); }
[border~=top]       { border-top-style:    var(--border-style); }
[border~=bottom]    { border-bottom-style: var(--border-style); }
[border]:not([border~=top]):not([border~=bottom]):not([border~=left]):not([border~=right]) { border-style: var(--border-style); }

/* BOX SHADOW

Supporting only identical x and y and no blur or spread radius.
*/

[box-shadow] {
  --inset: ;
  --box-shadow-offset: var(--length);

  box-shadow: var(--inset) var(--box-shadow-offset) var(--box-shadow-offset) hsla(var(--box-shadow-hue), var(--box-shadow-saturation), var(--box-shadow-lightness), var(--box-shadow-alpha));
}

[box-shadow~=inset] {
  --inset: inset;
}

/* TEXT SHADOW

Supporting only identical x and y offset.
*/

[text-shadow] {
  --text-shadow-offset: var(--length, 1px);
  --text-shadow-blur: 0;

  text-shadow: var(--text-shadow-offset) var(--text-shadow-offset) var(--text-shadow-blur) hsla(var(--text-shadow-hue), var(--text-shadow-saturation), var(--text-shadow-lightness), var(--text-shadow-alpha));
}

[text-shadow~=blur]   { --text-shadow-blur: 2px; }
[text-shadow~=x-blur] { --text-shadow-blur: 4px; }

/**
 * The `color` attribute is used for setting global color components.
 **/

[color] {
  --hue:        var(--global-hue);
  --saturation: var(--global-saturation);
  --lightness:  var(--global-lightness);
  --alpha:      var(--global-alpha);

  --color:      hsla(var(--hue, 0), var(--saturation, 50%), var(--lightness, 50%), var(--alpha, 1.0));
}

[text] {
  --text-hue:        var(--global-hue);
  --text-saturation: var(--global-saturation);
  --text-lightness:  var(--global-lightness);
  --text-alpha:      var(--global-alpha);
}

[text~=color]      { color: hsla(var(--text-hue), var(--text-saturation), var(--text-lightness), var(--text-alpha)); }

/* RESET GLOBALS USING `hue`, `saturation`, `lightness` and `alpha` classes */

/**
 *  COLUMN
 *
 * The `--number` variable will be set by classes such as "two".
*/

[columns]                      { column-count: 3; }
[columns~=one], [columns~=1]   { column-count: 1; }
[columns~=two], [columns~=2]   { column-count: 2; }
[columns~=three], [columns~=3] { column-count: 3; }
[columns~=four], [columns~=4]  { column-count: 4; }

[columns~=balance] { column-fill: balance; }
[columns~=auto]    { column-fill: auto; }
[columns~=span]    { column-span: all; -webkit-column-span: all; }

/* TODO: column-rule, column-gap */

/* CURSOR */

[cursor~=pointer] { cursor: pointer; }
[pointer-events]                    { pointer-events: auto; }
[pointer-events~=auto]              { pointer-events: auto; }
[pointer-events~=none]              { pointer-events: none; }

/* DIMENSIONS */

[width]      { width:      var(--length); }
[height]     { height:     var(--length); }
[min-height] { min-height: var(--length); }
[max-width]  { max-width:  var(--length); }
[min-width]  { min-width:  var(--length); }
[block-size] { block-size: var(--length); }
[max-block-size] { max-block-size: var(--length); }
[min-block-size] { min-block-size: var(--length); }

[width~=max-content]        { width: max-content; }

[width~=min-content]        { width: min-content; }

[width~=available]          { width: available;   }

[width~=fit-content]        { width: fit-content; }

[width~=fill]               { width: fill; }

[height~=max-content]        { height: max-content; }

[height~=min-content]        { height: min-content; }

[height~=available]          { height: available;   }

[height~=fit-content]        { height: fit-content; }

[height~=fill]               { height: fill; }

[max-width~=max-content]        { max-width: max-content; }

[max-width~=min-content]        { max-width: min-content; }

[max-width~=available]          { max-width: available;   }

[max-width~=fit-content]        { max-width: fit-content; }

[max-width~=fill]               { max-width: fill; }

[min-width~=max-content]        { min-width: max-content; }

[min-width~=min-content]        { min-width: min-content; }

[min-width~=available]          { min-width: available;   }

[min-width~=fit-content]        { min-width: fit-content; }

[min-width~=fill]               { min-width: fill; }

[max-height~=max-content]        { max-height: max-content; }

[max-height~=min-content]        { max-height: min-content; }

[max-height~=available]          { max-height: available;   }

[max-height~=fit-content]        { max-height: fit-content; }

[max-height~=fill]               { max-height: fill; }

[min-height~=max-content]        { min-height: max-content; }

[min-height~=min-content]        { min-height: min-content; }

[min-height~=available]          { min-height: available;   }

[min-height~=fit-content]        { min-height: fit-content; }

[min-height~=fill]               { min-height: fill; }

/* ASPECT RATIO */

[aspect-ratio]            { aspect-ratio: var(--number, 1); }
[aspect-ratio~=square]    { aspect-ratio: 1; }
[aspect-ratio~=video]     { aspect-ratio: 16 / 9; }
[aspect-ratio~=photo]     { aspect-ratio: 4 / 3; }
[aspect-ratio~=portrait]  { aspect-ratio: 3 / 4; }
[aspect-ratio~=wide]      { aspect-ratio: 21 / 9; }

/* BOX */

[box~=border]             { box-sizing: border-box; }
[box~=content]            { box-sizing: content-box; }

[box~=block]              { display: block;    }
[box~=hidden]             { display: none;     }
[box~=inline]             { display: inline;   }
[box~=inline][box~=block] { display: inline-block; }

[box~=top]         { vertical-align: top;      }
[box~=bottom]      { vertical-align: bottom;   }
[box~=middle]      { vertical-align: middle;   }
[box~=sub]         { vertical-align: sub;      }
[box~=text-top]    { vertical-align: text-top; }

/* FLEX */
/*

Classes defined:

ON CONTAINER:

flex              Use flex display on this container.
inline            Use inline flex display on this container.
horizontal        Distribute items horizontally (default).
vertical          Distribute items vertically.
wrap              Let items wrap to next row or column.
reverse           Layout items in reverse order.

justify           Distribute space between items in main direction.
justify-gap       Distribute space at start, between items, and end in main direction.
justify-h         Distribute space between items in horizontal direction.
justify-h-gap     Distribute space at left, between items, and at right in horizontal direction.
justify-v         Distribute space between items in vertical direction.
justify-v-gap     Distribute space at top, between items, and at end in vertical direction.

align-top         Align tops of horizontal items.
align-middle      Align middles of horizontal items.
align-bottom      Align bottoms of horizontal items.
align-left        Align left edge of vertical items
align-center      Align center of vertical items.
align-right       Align right edge of vertical items.

ON ITEMS:

grow              Allow this item to grow.
x-grow            Allow this item to grow more.
no-shrink         Do not allow this item to shrink.

self-top          Align flex child to top.
self-middle       Align flex child to middle.
self-bottom       Align flex child to bottom.
self-left         Align flex child to left.
self-center       Align flex child to center.
self-right        Align flex child to right.
self-stretch      Stretch flex child.
self-baselnie     Align flex child to baseline.
*/

/*
Basic display types for flex.
`inline` is overloaded; by itself it yields `display: inline`.
*/
[flex]                   { display: flex;          }
[flex~=inline]           { display: inline-flex;   }

/*
FLEX DIRECTION.
Note that `vertical` and `horizontal` are also overloaded,
as defined in `direction[css]`.
*/
[flex~=x]         { flex-direction: column; }
[flex~=y]         { flex-direction: row;    }

/*
WRAPPING AND REVERSING.
A `wrap` class turns the `flex-direction` property
into its wrapped variants.
Note: `wrap` is an overloaded property with a different meaning without `flex`.
*/
[flex~=wrap]             { flex-wrap: wrap; }

[flex~=reverse]          { flex-direction: row-reverse;    }
[flex~=y][flex~=reverse] { flex-direction: column-reverse; }

/*
JUSTIFYING AND ALIGNING.
Since I, for one, can never remember the difference between
`align-items` and `justify-content`, provide human-oriented
direction-based micro-classes such as `top, `left`, etc.
These are interpreted differently depending on `flex-direction`.

Note that `horizontal` is the default.
*/

/*
`justify` by itself refers to justification on the main axis.
There are also `justify-v` and `justify-h` variants for clarity
or for specifying justification on the cross-axis.
`justify-gap` requests distributing space to start and end as well as between.
*/
[flex~=justify]           { justify-content: space-between; }
[flex~=justify-gap]       { justify-content: space-around; }

[flex~=top]               { align-items: flex-start; }
[flex~=bottom]            { align-items: flex-end;   }
[flex~=middle]            { align-items: center;     }

[flex~=left]              { justify-content: flex-start; }
[flex~=right]             { justify-content: flex-end;   }
[flex~=center]            { justify-content: center;     }

/* For horizontal containers, `justify-h` is the same as `justify`. */
[flex~=justify-x]         { justify-content: space-between; }
[flex~=justify-x-gap]     { justify-content: space-around;  }
[flex~=justify-y]         { align-items: space-between;     }
[flex~=justify-y-gap]     { align-items: space-around;      }

[flex~=y][flex~=justify]  { justify-content: space-between;   }
[flex~=y][flex~=justify-gap] { justify-content: space-around; }

[flex~=y][flex~=top]      { justify-content: flex-start; }
[flex~=y][flex~=bottom]   { justify-content: flex-end;   }
[flex~=y][flex~=middle]   { justify-content: center;     }

[flex~=y][flex~=left]     { align-items: flex-start; }
[flex~=y][flex~=right]    { align-items: flex-end;   }
[flex~=y][flex~=center]   { align-items: center;     }

/* For y containers, `justify-v` is the same as `justify`. */
[flex~=y][flex~=justify-x]      { align-items: space-between;     }
[flex~=y][flex~=justify-x-gap]  { align-items: space-around;      }
[flex~=y][flex~=justify-y]      { justify-content: space-between; }
[flex~=y][flex~=justify-y-gap]  { justify-content: space-around;  }

/*
GROWING AND SHRINKING.
Provide micro-classes for common cases of grow and shrink.
*/
[grow] { flex-grow: 1; }
[x-grow] { flex-grow: 2; }
[no-shrink] { flex-shrink: 0; }

/* TODO: add other self items */
[self~=stretch] { align-self: stretch; }

/* ORDER */
[first] { order: -99; }
[last]  { order: +99; }

/* Self-alignment (of flex children) */
[self~=top]      { align-self: flex-start; }
[self~=middle]   { align-self: center; }
[self~=bottom]   { align-self: flex-end; }
[self~=left]     { align-self: flex-start; }
[self~=center]   { align-self: center; }
[self~=right]    { align-self: flex-end; }
[self~=stretch]  { align-self: stretch; }
[self~=baseline] { align-self: baseline; }

/* GAP (works with both flex and grid) */

[gap]          { gap: var(--length, 1em); }
[gap~=thin]    { gap: 0.25em; }
[gap~=medium]  { gap: 0.5em;  }
[gap~=thick]   { gap: 1em;    }
[gap~=x-thick] { gap: 2em;    }
[gap~=row]     { row-gap: var(--length, 1em);    }
[gap~=column]  { column-gap: var(--length, 1em); }

/* GRID */
/*

The `grid` micro-attribute sets up a CSS grid container.
Column counts use the same English words as elsewhere.
`auto-fill` and `auto-fit` create responsive grids
whose minimum cell size can be set via `--grid-min`.

ON CONTAINER:

grid              Use grid display on this container.
inline            Use inline grid display.
two, three...     Number of equal columns.
auto-fill         Fill with as many columns as fit.
auto-fit          Like auto-fill but collapses empty tracks.
dense             Pack items densely.
rows              Auto-flow by row (default).
columns           Auto-flow by column.

ALIGNMENT (same keywords as flex):

top/middle/bottom   Align items vertically.
left/center/right   Align items horizontally.
stretch             Stretch items in both directions.
justify             Space between columns.
justify-gap         Space around columns.

ON ITEMS:

span two/three...   Span multiple columns.
span-row two...     Span multiple rows.
*/

[grid]                   { display: grid; }
[grid~=inline]           { display: inline-grid; }

/* column templates */
[grid~=one]              { grid-template-columns: 1fr; }
[grid~=two]              { grid-template-columns: repeat(2, 1fr); }
[grid~=three]            { grid-template-columns: repeat(3, 1fr); }
[grid~=four]             { grid-template-columns: repeat(4, 1fr); }
[grid~=five]             { grid-template-columns: repeat(5, 1fr); }
[grid~=six]              { grid-template-columns: repeat(6, 1fr); }

/* responsive grids -- set --grid-min to control minimum cell size */
[grid~=auto-fill]        { grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 10rem), 1fr)); }
[grid~=auto-fit]         { grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 10rem), 1fr)); }

/* subgrid */
[grid~=subgrid]          { grid-template-columns: subgrid; }
[grid~=subgrid-rows]     { grid-template-rows: subgrid; }

/* auto-flow direction */
[grid~=rows]             { grid-auto-flow: row; }
[grid~=columns]          { grid-auto-flow: column; }
[grid~=dense]            { grid-auto-flow: dense; }

/* grid alignment */
[grid~=top]              { align-items: start;   }
[grid~=middle]           { align-items: center;  }
[grid~=bottom]           { align-items: end;     }
[grid~=left]             { justify-items: start;  }
[grid~=center]           { justify-items: center; }
[grid~=right]            { justify-items: end;    }
[grid~=stretch]          { align-items: stretch; justify-items: stretch; }

[grid~=justify]          { justify-content: space-between; }
[grid~=justify-gap]      { justify-content: space-around;  }

/* grid item spanning */
[span~=two]              { grid-column: span 2; }
[span~=three]            { grid-column: span 3; }
[span~=four]             { grid-column: span 4; }
[span~=five]             { grid-column: span 5; }
[span~=six]              { grid-column: span 6; }

[span-row~=two]          { grid-row: span 2; }
[span-row~=three]        { grid-row: span 3; }
[span-row~=four]         { grid-row: span 4; }

/* FONT VARIANT */

[small-caps] { font-variant: small-caps; }

/* HYPHENS */

/* Browser support is poor. */
[hyphens~=none]   { hyphens: none; }
[hyphens~=auto]   { hyphens: auto; }
[hyphens~=manual] { hyphens: manual; }

/* INDENT */

[text~=indent]      { text-indent: 2em; }
[text~=indent-more] { text-indent: 4em; }

/* TEXT ALIGNMENT */

[text~=left]        { text-align: left;        }
[text~=right]       { text-align: right;       }
[text~=center]      { text-align: center;      }
[text~=justify]     { text-align: justify;     }
[text~=start]       { text-align: start;       }
[text~=end]         { text-align: end;         }
[text~=justify-all] { text-align: justify-all; }

/* LETTER SPACING */

:root {
  --text-spacing-loose:0.20em;
  --text-spacing-x-loose:0.40em;
  --text-spacing-tight:-0.05em;
}

[text~=loose]         { letter-spacing: var(--text-spacing-loose); }
[text~=x-loose]       { letter-spacing: var(--text-spacing-x-loose); }
[text~=tight]         { letter-spacing: var(--text-spacing-tight); }

/* LINE HEIGHT */

[line~=spacing] {
  --line-height: 1.5;
  line-height: var(--line-height);
}

[line~=spacing][line~=tight]        { --line-height: 1.2;    }
[line~=spacing][line~=single]       { --line-height: 1.2;    }
[line~=spacing][line~=normal]       { --line-height: normal; }
[line~=spacing][line~=loose]        { --line-height: 1.5;    }
[line~=spacing][line~=x-loose]      { --line-height: 2;      }
[line~=spacing][line~=double]       { --line-height: 2;      }

/* LISTS */

[list~=inside]      { list-style-position: inside;  }
[list~=outside]     { list-style-position: outside; }

:root {
  --list-alpha: lower-alpha;
  --list-roman: lower-roman;
}

[list~=upper] { --list-alpha: upper-alpha; --list-roman: upper-roman; }
[list~=lower] { --list-alpha: lower-alpha; --list-roman: lower-roman; }

[list~=alpha]        { list-style-type: var(--list-alpha); }
[list~=circle]       { list-style-type: circle;      }
[list~=decimal]      { list-style-type: decimal;     }
[list~=disc]         { list-style-type: disc;        }
[list~=none]         { list-style-type: none;        }
[list~=roman]        { list-style-type: var(--list-roman); }
[list~=square]       { list-style-type: square;      }

/* MARGINS */

:root {
  --margin-thin: 0.25em;
  --margin-medium: 0.5em;
  --margin-thick: 1.0em;
}

/* physical sides */
[margin~=left]         { margin-left:   var(--margin-length); }
[margin~=right]        { margin-right:  var(--margin-length); }
[margin~=top]          { margin-top:    var(--margin-length); }
[margin~=bottom]       { margin-bottom: var(--margin-length); }

/* logical sides */
[margin~=inline]       { margin-inline:       var(--margin-length); }
[margin~=block]        { margin-block:        var(--margin-length); }
[margin~=inline-start] { margin-inline-start: var(--margin-length); }
[margin~=inline-end]   { margin-inline-end:   var(--margin-length); }
[margin~=block-start]  { margin-block-start:  var(--margin-length); }
[margin~=block-end]    { margin-block-end:    var(--margin-length); }

[margin~=thin]   { --margin-length: var(--margin-thin); }
[margin~=medium] { --margin-length: var(--margin-medium); }
[margin~=thick]  { --margin-length: var(--margin-thick); }
[margin~=none]   { --margin-length: 0; }
[margin~=no]     { --margin-length: 0; }

/* With no side modifier, set on all sides. */
[margin]:not([margin~=top]):not([margin~=bottom]):not([margin~=left]):not([margin~=right]) { margin: var(--length); }

/* MEDIA */

@media screen {
  [print-only] { display: none !important; }
}

@media print {
  [screen-only] { display: none !important; }
}

/* NUMBERS */

/* units */
[ch]       { --length: calc(var(--number) * 1ch);   }
[cm]       { --length: calc(var(--number) * 1cm);   }
[em]       { --length: calc(var(--number) * 1em);   }
[ex]       { --length: calc(var(--number) * 1ex);   }
[in]       { --length: calc(var(--number) * 1in);   }
[mm]       { --length: calc(var(--number) * 1mm);   }
[pc]       { --length: calc(var(--number) * 1pc);   }
[pt]       { --length: calc(var(--number) * 1pt);   }
[px]       { --length: calc(var(--number) * 1px);   }
[q]        { --length: calc(var(--number) * 1q);    }
[rem]      { --length: calc(var(--number) * 1rem);  }
[vh]       { --length: calc(var(--number) * 1vh);   }
[vmax]     { --length: calc(var(--number) * 1vmax); }
[vmin]     { --length: calc(var(--number) * 1vmin); }
[vw]       { --length: calc(var(--number) * 1vw);   }

[ms]       { --length: calc(var(--number) * 1ms);   }
[s]        { --length: calc(var(--number) * 1s);    }

[deg]      { --length: calc(var(--number) * 1deg);  }
[grad]     { --length: calc(var(--number) * 1grad); }
[rad]      { --length: calc(var(--number) * 1rad);  }
[turn]     { --length: calc(var(--number) * 1turn); }

[ch], [cm], [em], [ex], [in], [mm], [pc], [pt], [px], [q], [rem], [vh], [vmax], [vmin], [vmax],
[ms], [s],
[deg], [grad], [rad], [turn],
[ten], [twenty], [thirty], [forty], [fifty], [sixty], [seventy], [eighty], [ninety],
[zero], [one], [two], [three], [four], [five], [six], [seven], [eight], [nine],
[eleven], [twelve], [thirteen], [fourteen], [fifteen], [sixteen], [seventeen], [eighteen], [nineteen],
[halves], [half], [thirds], [third], [fourths], [fourth], [fifths], [fifth], [sixths], [sixth], [sevenths], [seventh], [eighths], [eighth], [ninths], [ninth], [tenths], [tenth],
[nothing], {
  --denominator: 1;
  --sign: 1;
  --ones: 0;
  --tens: 0;

  --number: calc((((10 * var(--tens)) + var(--ones)) / var(--denominator)) * var(--sign));
}

/* "Ones" values are used in calculating unsigned number. */
[zero]      { --number: 0; }
[one]       { --ones: 1; }
[two]       { --ones: 2; }
[three]     { --ones: 3; }
[four]      { --ones: 4; }
[five]      { --ones: 5; }
[six]       { --ones: 6; }
[seven]     { --ones: 7; }
[eight]     { --ones: 8; }
[nine]      { --ones: 9; }
[eleven]    { --ones: 11; }
[twelve]    { --ones: 12; }
[thirteen]  { --ones: 13; }
[fourteen]  { --ones: 14; }
[fifteen]   { --ones: 15; }
[sixteen]   { --ones: 16; }
[seventeen] { --ones: 17; }
[eighteen]  { --ones: 18; }
[nineteen]  { --ones: 19; }

/* NUMBERS */
[ten]       { --tens: 1; }
[twenty]    { --tens: 2; }
[thirty]    { --tens: 3; }
[forty]     { --tens: 4; }
[fifty]     { --tens: 5; }
[sixty]     { --tens: 6; }
[seventy]   { --tens: 7; }
[eighty]    { --tens: 8; }
[ninety]    { --tens: 9; }

/* FRACTIONS */
[\30 .1]   { --unsigned-number: 0.1;  }
[\30 .2]   { --unsigned-number: 0.2;  }
[\30 .25]  { --unsigned-number: 0.25; }
[\30 .3]   { --unsigned-number: 0.3;  }
[\30 .4]   { --unsigned-number: 0.4;  }
[\30 .5]   { --unsigned-number: 0.5;  }
[\30 .6]   { --unsigned-number: 0.6;  }
[\30 .7]   { --unsigned-number: 0.7;  }
[\30 .75]  { --unsigned-number: 0.75; }
[\30 .8]   { --unsigned-number: 0.8;  }
[\31 .0]   { --unsigned-number: 1.0;  }
[\31 .5]   { --unsigned-number: 1.5;  }
[\32 .0]   { --unsigned-number: 2.0;  }

[\-0.1]   { --number: -0.1;  }
[\-0.2]   { --number: -0.2;  }
[\-0.25]  { --number: -0.25; }
[\-0.3]   { --number: -0.3;  }
[\-0.4]   { --number: -0.4;  }
[\-0.5]   { --number: -0.5;  }
[\-0.6]   { --number: -0.6;  }
[\-0.7]   { --number: -0.7;  }
[\-0.75]  { --number: -0.75; }
[\-0.8]   { --number: -0.8;  }
[\-1.0]   { --number: -1.0;  }
[\-1.5]   { --number: -1.5;  }
[\-2.0]   { --number: -2.0;  }

/* Raw numbers. */
[\31]     { --unsigned-number: 1; }
[\32]     { --unsigned-number: 2; }
[\33]     { --unsigned-number: 3; }
[\34]     { --unsigned-number: 4; }
[\35]     { --unsigned-number: 5; }
[\36]     { --unsigned-number: 6; }
[\37]     { --unsigned-number: 7; }
[\38]     { --unsigned-number: 8; }
[\39]     { --unsigned-number: 9; }
[\31 0]   { --unsigned-number: 10; }
[\32 0]   { --unsigned-number: 20; }
[\33 0]   { --unsigned-number: 30; }
[\34 0]   { --unsigned-number: 40; }
[\35 0]   { --unsigned-number: 50; }
[\36 0]   { --unsigned-number: 60; }
[\37 0]   { --unsigned-number: 70; }
[\38 0]   { --unsigned-number: 80; }
[\39 0]   { --unsigned-number: 90; }
[\31 00]  { --unsigned-number: 100; }
[\32 00]  { --unsigned-number: 200; }
[\33 00]  { --unsigned-number: 300; }
[\34 00]  { --unsigned-number: 400; }
[\35 00]  { --unsigned-number: 500; }
[\36 00]  { --unsigned-number: 600; }
[\37 00]  { --unsigned-number: 700; }
[\38 00]  { --unsigned-number: 800; }
[\39 00]  { --unsigned-number: 900; }
[\31 000] { --unsigned-number: 1000; }
[\32 000] { --unsigned-number: 2000; }

/* Negative numbers. */
[\-1]     { --number: -1; }
[\-2]     { --number: -2; }
[\-3]     { --number: -3; }
[\-4]     { --number: -4; }
[\-5]     { --number: -5; }
[\-6]     { --number: -6; }
[\-7]     { --number: -7; }
[\-8]     { --number: -8; }
[\-9]     { --number: -9; }
[\-10]    { --number: -10; }
[\-20]    { --number: -20; }
[\-30]    { --number: -30; }
[\-40]    { --number: -40; }
[\-50]    { --number: -50; }
[\-60]    { --number: -60; }
[\-70]    { --number: -70; }
[\-80]    { --number: -80; }
[\-90]    { --number: -90; }

[\-100]   { --number: -100; }
[\-200]   { --number: -200; }
[\-300]   { --number: -300; }
[\-400]   { --number: -400; }
[\-500]   { --number: -500; }
[\-600]   { --number: -600; }
[\-700]   { --number: -700; }
[\-800]   { --number: -800; }
[\-900]   { --number: -900; }
[\-1000]  { --number: -1000; }

/* PERCENTAGES */
[full]         { --number: 1; }

/* RATIONALS */
[\31 \/2]      { --unsigned-number: calc(1 / 2); }
[\31 \/3]      { --unsigned-number: calc(1 / 3); }
[\31 \/4]      { --unsigned-number: calc(1 / 4); }
[\31 \/5]      { --unsigned-number: calc(1 / 5); }
[\31 \/6]      { --unsigned-number: calc(1 / 6); }
[\31 \/7]      { --unsigned-number: calc(1 / 7); }
[\31 \/8]      { --unsigned-number: calc(1 / 8); }
[\31 \/9]      { --unsigned-number: calc(1 / 9); }
[\31 \/10]     { --unsigned-number: calc(1 / 10); }

[\-\31 \/2]    { --number: calc(-1 / 2); }
[\-\31 \/3]    { --number: calc(-1 / 3); }
[\-\31 \/4]    { --number: calc(-1 / 4); }
[\-\31 \/5]    { --number: calc(-1 / 5); }
[\-\31 \/6]    { --number: calc(-1 / 6); }
[\-\31 \/7]    { --number: calc(-1 / 7); }
[\-\31 \/8]    { --number: calc(-1 / 8); }
[\-\31 \/9]    { --number: calc(-1 / 9); }
[\-\31 \/10]   { --number: calc(-1 / 10); }

/* Explicit percentages */
[\31 0\%]       { --length: 10%; }
[\32 0\%]       { --length: 20%; }
[\32 5\%]       { --length: 25%; }
[\33 0\%]       { --length: 30%; }
[\34 0\%]       { --length: 40%; }
[\35 0\%]       { --length: 50%; }
[\36 0\%]       { --length: 60%; }
[\37 0\%]       { --length: 70%; }
[\37 5\%]       { --length: 75%; }
[\38 0\%]       { --length: 80%; }
[\39 0\%]       { --length: 90%; }
[\31 00\%]      { --length: 100%; }

[\-\31 0\%]     { --length: -10%; }
[\-\32 0\%]     { --length: -20%; }
[\-\33 0\%]     { --length: -30%; }
[\-\34 0\%]     { --length: -40%; }
[\-\35 0\%]     { --length: -50%; }
[\-\36 0\%]     { --length: -60%; }
[\-\37 0\%]     { --length: -70%; }
[\-\38 0\%]     { --length: -80%; }
[\-\39 0\%]     { --length: -90%; }
[\-\31 00\%]    { --length: -100%; }

[\30]           { --length: 0; }

/* Support "three fifths" etc. */
[halves], [half]      { --denominator: 2; }
[thirds], [third]     { --denominator: 3; }
[fourths], [fourth]   { --denominator: 4; }
[fifths], [fifth]     { --denominator: 5; }
[sixths], [sixth]     { --denominator: 6; }
[sevenths], [seventh] { --denominator: 7; }
[eighths], [eighth]   { --denominator: 8; }
[ninths], [ninth]     { --denominator: 9; }
[tenths], [tenth]     { --denominator: 10; }

[minus]   { --sign: -1; }
[size]    { --length: calc(100% * var(--number)); }
[percent] { --length: calc(1% * var(--number)); }

/* OPACITY */

[opaque]      { opacity: 1;   }
[semi-opaque] { opacity: 0.5; }
[transparent] { opacity: 0;   }

[opacity] { opacity: var(--number); }

/* OUTLINE */

:root {
  --outline-width-global:      medium;
  --outline-style-global:      none;
  --outline-hue-global:        var(--hue-global);
  --outline-saturation-global: var(--saturation-global);
  --outline-lightness-global:  var(--lightness-global);
  --outline-alpha-global:      var(--alpha-global);;
}

[outline] {
  --outline-style:  var(--outline-style-global);
  --outline-width:  var(--length);
  --outline-color:  var(--color);
}

[outline]              { --outline-width: medium; }
[outline~=medium]      { --outline-width: medium; }
[outline~=thin]        { --outline-width: thin;   }
[outline~=thick]       { --outline-width: thick;  }

/* STYLES */
[outline]              { --outline-style: solid;  }
[outline~=solid]       { --outline-style: solid;  }
[outline~=dotted]      { --outline-style: dotted; }
[outline~=dashed]      { --outline-style: dashed; }
[outline~=groove]      { --outline-style: groove; }
[outline~=ridge]       { --outline-style: ridge;  }
[outline~=inset]       { --outline-style: inset;  }
[outline~=outset]      { --outline-style: outset; }

[outline~=left]   { outline-left-style:   var(--outline-style); }
[outline~=right]  { outline-right-style:  var(--outline-style); }
[outline~=top]    { outline-top-style:    var(--outline-style); }
[outline~=bottom] { outline-bottom-style: var(--outline-style); }
[outline]:not([outline~=top]):not([outline~=bottom]):not([outline~=left]):not([outline~=right]) { outline-style: var(--outline-style); }

/* OVERFLOW */

[overflow~=scroll] { --overflow: scroll; }
[overflow~=hidden] { --overflow: hidden; }

[overflow~=x], [overflow~=horizontal] { overflow-x: var(--overflow); }
[overflow~=y], [overflow~=vertical]   { overflow-y: var(--overflow); }

[overflow]:not([overflow~=x]):not([overflow~=horizontal]):not([overflow~=y]):not([overflow~=vertical]) { overflow: var(--overflow); }

/* PADDING */

[padding]      { --length: 1em; }

/* physical sides */
[padding~=left]         { padding-left:   var(--length); }
[padding~=right]        { padding-right:  var(--length); }
[padding~=top]          { padding-top:    var(--length); }
[padding~=bottom]       { padding-bottom: var(--length); }

/* logical sides */
[padding~=inline]       { padding-inline:       var(--length); }
[padding~=block]        { padding-block:        var(--length); }
[padding~=inline-start] { padding-inline-start: var(--length); }
[padding~=inline-end]   { padding-inline-end:   var(--length); }
[padding~=block-start]  { padding-block-start:  var(--length); }
[padding~=block-end]    { padding-block-end:    var(--length); }

/* With no side modifier, set on all sides. */
[padding~=thin]   { --length: 0.25em; }
[padding~=medium] { --length: 0.5em; }
[padding~=thick]  { --length: 1.0em; }

[padding]:not([padding~=top]):not([padding~=bottom]):not([padding~=left]):not([padding~=right]) { padding: var(--length); }

/* INSET (logical shorthand for positioning) */

[inset]              { inset: var(--length, 0); }
[inset~=inline]      { inset-inline: var(--length, 0); }
[inset~=block]       { inset-block: var(--length, 0); }
[inset~=inline-start] { inset-inline-start: var(--length, 0); }
[inset~=inline-end]  { inset-inline-end: var(--length, 0); }
[inset~=block-start] { inset-block-start: var(--length, 0); }
[inset~=block-end]   { inset-block-end: var(--length, 0); }

/* LOGICAL SIZING */

[inline-size]     { inline-size: var(--length); }
[max-inline-size] { max-inline-size: var(--length); }
[min-inline-size] { min-inline-size: var(--length); }

/* POSITION */

[absolute] { position: absolute; }
[relative] { position: relative; }
[fixed]    { position: fixed;    }
[sticky]   { position: sticky;   }

[top-left] { top: 0; left: 0; }

/* QUOTES */

/* Define smart quotes. */
q { quotes: '\201c' '\201d'; }

q::before { content: open-quote; }
q::after  { content: close-quote; }

/* RESIZE */

[resize]                                         { resize: both;       }
[resize~=horizontal][resize~=vertical]           { resize: both;       }
[resize~=horizontal]                             { resize: horizontal; }
[resize~=vertical]                               { resize: vertical;   }

/* RUBY */

[ruby~=inter-character] { ruby-position: inter-character; }
[ruby~=left]            { ruby-position: left;       }
[ruby~=over]            { ruby-position: over;       }
[ruby~=right]           { ruby-position: right;      }
[ruby~=under]           { ruby-position: under;      }
[ruby~=after]           { ruby-position: after;  -webkit-ruby-position: after; }
[ruby~=before]          { ruby-position: before; -webkit-ruby-position: before; }

[ruby~=start]           { ruby-align: start;         }
[ruby~=center]          { ruby-align: center;        }

/* These class names are meant to be aligned with those for flex. */
[ruby~=justify]         { ruby-align: space-between; }
[ruby~=justify-gap]     { ruby-align: space-around;  }

/* No browser implements these. */
[ruby~=separate]        { ruby-merge: separate;      }
[ruby~=collapse]        { ruby-merge: collapse;      }

/**
 * SPACING
 *
 * Vertical spacing between elements.
 *
 * The `[spaced]` class adds space to each child element except the last.
 * The `[loose]`. and `[tight]` modifiers expand and reduce that space, respectively.
 * Note: this puts space BEFORE all elements, including the first!
 **/

[spaced] > *::before {
  white-space: pre;
  display: block;
}

[spaced] > :not(:first-child)::before {
  content: ' ';
}

[spaced~=before] > :first-child::before {
  content: ' ';
}

[spaced]            > *::before { line-height: 1;    }
[spaced~=loose]     > *::before { line-height: 1.5;  }
[spaced~=x-loose]   > *::before { line-height: 2;    }
[spaced~=tight]     > *::before { line-height: 0.5;  }
[spaced~=x-tight]   > *::before { line-height: 0.25; }

/* TEXT */

/* colors */
[text] {
  color: var(--color);
  font-size: var(--length);
}

/* font weight */

[font~=hairline]      { font-weight: 100; }
[font~=x-light]       { font-weight: 200; }
[font~=light]         { font-weight: 300; }
[font~=normal]        { font-weight: 400; }
[font~=semi-bold]     { font-weight: 600; }
[font~=bold]          { font-weight: 700; }
[font~=x-bold]        { font-weight: 800; }
[font~=heavy]         { font-weight: 900; }

[font~=lighter]       { font-weight: lighter; }
[font~=bolder]        { font-weight: bolder;  }


/* SIZE */
[font~=xx-small]     { --length: xx-small; }
[font~=x-small]      { --length: x-small;  }
[font~=small]        { --length: small;    }
[font~=medium]       { --length: medium;   }
[font~=large]        { --length: large;    }
[font~=x-large]      { --length: x-large;  }
[font~=xx-large]     { --length: xx-large; }

[font~=larger]       { --length: larger;   }
[font~=smaller]      { --length: smaller;  }

/* italics */
[font~=emphasis]     { font-style: italic;  }
[font~=italic]       { font-style: italic;  }

/* TEXT TRANSFORM */
[text~=upper]        { text-transform: uppercase;  }
[text~=lower]        { text-transform: lowercase;  }
[text~=capitalize]   { text-transform: capitalize; }

/* TEXT WRAP */
[text~=balance]      { text-wrap: balance; }
[text~=pretty]       { text-wrap: pretty;  }
[text~=nowrap]       { text-wrap: nowrap;  }
[text~=stable]       { text-wrap: stable;  }

[underline]          { text-decoration: underline; }
[no-underline]       { text-decoration: none; }

/* TRANSITION */

/* transition all properties */
[transition] {
  transition-property: all;
  --transition-duration: 0.75s;
  transition-duration: var(--transition-duration);
}

/* duration */
[transition~=fast]         { --transition-duration: 0.50s; }
[transition~=x-fast]       { --transition-duration: 0.25s; }
[transition~=slow]         { --transition-duration: 1.00s; }
[transition~=x-slow]       { --transition-duration: 2.00s; }

/* timing functions */
[transition~=ease]         { transition-timing-function: ease;        }
[transition~=ease-in]      { transition-timing-function: ease-in;     }
[transition~=ease-in-out]  { transition-timing-function: ease-in-out; }
[transition~=linear]       { transition-timing-function: linear;      }
[transition~=step]         { transition-timing-function: step-start;  }
[transition~=step-start]   { transition-timing-function: step-start;  }
[transition~=step-end]     { transition-timing-function: step-end;    }

/* delay */
[transition~=delay]       { transition-delay: 0.8s; }
[transition~=delay-more]  { transition-delay: 1.6s; }
[transition~=delay-less]  { transition-delay: 0.4s; }

/* VISIBILITY */

[visible]   { visibility: visible; }
[invisible] { visibility: hidden;  }

/* WHITE SPACE */

/*
Break down `white-space` semantically.

I don't know about you, but I can never remember the values for `white-space`.
Every time I want to use one, I have to look it up again.
Actually, it's quite easy when you break it down.
The properties each indicate a combination of whether newlines are to be honored,
whether whitespace is to be preserved, and whether wrapping is desired.

These human CSS micro-attributes map those concepts into `white-space` values,
so hopefully you'll never have to consult that page again.

Attributes defined:

newlines        Treat newlines as newlines.
spaces          Do not collapse whitespace.
nowrap          Do not wrap.
*/

/*
Honor newlines, but do not preserve whitespace and wrap.
This corresponds to the common case of displaying a user post.
*/
[whitespace~=newlines] { white-space: pre-line; }

/*
Honor newlines while also preserving whitespace.
*/
[whitespace~=newlines][whitespace~=spaces] { white-space: pre-wrap; }

/*
Honor newlines, preserve whitespace, and do not wrap.
This replicates the behavior of `<pre>'.
You are probably better off using `pre`, although it will
also give you a monospaced font and vertical padding.
*/
[whitespace], [whitespace~=newlines][whitespace~=spaces][whitespace~=nowrap] { white-space: pre; }

/*
Without honoring newlines, no wrapping means that the output will be on a single line.
In this case, whitespace is never preserved.
CSS offers no alternative for preserving whitespace while not honoring newlines and not wrapping.
*/
[whitespace~=nowrap] { white-space: nowrap; }

[break-word] { overflow-wrap: break-word; }

/* Z-INDEX */

[back]              { z-index: -1;   }
[front]             { z-index: +1;   }
[backmost]          { z-index: -999; }
[frontmost]         { z-index: +999; }

/* SCROLL SNAP */

[scroll-snap] {
  --scroll-snap-direction: y;
  --scroll-snap-type: proximity;

  scroll-snap-type: var(--scroll-snap-direction) var(--scroll-snap-type);
}


[scroll-snap~=x]             { --scroll-snap-direction: x; }
[scroll-snap~=mandatory]     { --scroll-snap-type: mandatory; }

[scroll-snap-align] {
  --scroll-snap-align: start;

  scroll-snap-align: var(--scroll-snap-align);
}

[scroll-snap-align~=start]   { --scroll-snap-align: start; }
[scroll-snap-align~=center]  { --scroll-snap-align: center; }
[scroll-snap-align~=end]     { --scroll-snap-align: end; }

/*# sourceMappingURL=index.css.map */