/* DO NOT ADD STYLES HERE; ADD CUSTOM PROPERTIES TO USE IN OTHER STYLESHEETS */

/*
Spacing

These are global spacing values for a website.

_Notice_: We will use Bootstrap values until Design defines values.

Usage: `var(--global-space--normal)`

Reference:
- https://tacc-main.atlassian.net/wiki/x/zgJv
- https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
- https://getbootstrap.com/docs/4.0/utilities/spacing/
- https://getbootstrap.com/docs/4.0/getting-started/theming/#sass-options

Styleguide Settings.CustomProperties.Space
*/

/* Modifers
    --normal:   standard value
    --(…)small: smaller value
    --(…)large: larger value
*/
:root {
  /* Generic */
  --global-space--xx-small: 2px;   /* 0.125rem (if base is 16px) */
  --global-space--x-small: 4px;    /* 0.25rem  (if base is 16px) */
  --global-space--small: 8px;      /* 0.5rem   (if base is 16px) */
  --global-space--normal: 16px;    /* 1.0rem   (if base is 16px) */
  --global-space--large: 24px;     /* 1.5rem   (if base is 16px) */
  --global-space--x-large: 48px;   /* 3.0rem   (if base is 16px) */

  /* Third-Party */
  --global-space--bootstrap-gap: 30px; /* Bootstrap `.container` & `.row` */

  /* Miscellaneous */
  --global-space--list-indent: 40px;   /* browser default (Firefox, Edge) */
  --global-space--section-gap: 60px;   /* recurring design doc spacing */
  --global-space--grid-gap: var(--global-space--bootstrap-gap);
  --global-space--above-breadcrumbs: 45px;
  --global-space--under-breadcrumbs: 40px;
  --global-space--pattern-pad: 30px;
  --global-space--unnamed: 50px;

  /* Applications */
  --global-space--section-top: 12px;
  --global-space--section-bottom: 0;
  --global-space--section-left: 24px;
  --global-space--section-right: 36px;
  --global-space--section:
    var(--global-space--section-top)
    var(--global-space--section-right)
    var(--global-space--section-bottom)
    var(--global-space--section-left);

  /* CMS Pages */
  --global-space--hr-buffer-above: 30px;
  --global-space--hr-buffer-below: 30px;
  --global-space--p-buffer-above: 0; /* origin: Bootstrap _reboot.css */
  --global-space--p-buffer-below: 2rem; /* origin: html-elements.cms.css */
}