//------------------------------------------------------------------------------------------------
// SPACING UNITS
//------------------------------------------------------------------------------------------------

/*
Here we define spacing variants. These are used to generate spacing
variants for many object and utility classes to give you an easy way of
spacing out content. Typically, if a component requires more precise
spacing, this CSS should be defined in the component CSS, not here.

We don't use variables featuring xs, sm, md, lg etc as to not confuse with
responsive breakpoints.

NOTE: Be careful not to create too many as that will significantly bloat CSS.
Only create if you plan to use very often, otherwise add your spacing values
to the component CSS directly.

[1] This '0' spacing value should always be last. That way, you can easily disable
applications of these spacing values. For instance `u-p-regular u-pb-none` would
result in an element which has padding all around, except for the bottom.
*/

$spacing: (
	'micro': 5px,
	'tiny': 10px,
	'small': 15px,
	'gutter': $gutter,
	'reduced': 25px,
	'regular': 30px,
	'increased': 40px,
	'large': 50px,
	'huge': 75px,
	'none': 0px /* [1] */
) !default;