diff --git a/docs/index.html b/docs/index.html
index 28ede5f..88cb16f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -43,7 +43,9 @@
 #{$scope}[type="reset"]:-moz-focusring,
 #{$scope}[type=&quot;submit&quot;]:-moz-focusring">#{$scope}button:-moz-focusring, #{$scope}[type=&quot;button&quot;]:-moz-focusring, #{$scope}[type=&quot;reset&quot;]:-moz-focusring, #{$scope}[type=&quot;submit&quot;]:-moz-focusring</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}fieldset" data-type="css"><a href="#normalize-css-#{$scope}fieldset">#{$scope}fieldset</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}legend" data-type="css"><a href="#normalize-css-#{$scope}legend">#{$scope}legend</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}progress" data-type="css"><a href="#normalize-css-#{$scope}progress">#{$scope}progress</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}textarea" data-type="css"><a href="#normalize-css-#{$scope}textarea">#{$scope}textarea</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}[type=&quot;number&quot;]::-webkit-inner-spin-button,
 #{$scope}[type=&quot;number&quot;]::-webkit-outer-spin-button" data-type="css"><a href="#normalize-css-#{$scope}[type=&quot;number&quot;]::-webkit-inner-spin-button,
-#{$scope}[type=&quot;number&quot;]::-webkit-outer-spin-button">#{$scope}[type=&quot;number&quot;]::-webkit-inner-spin-button, #{$scope}[type=&quot;number&quot;]::-webkit-outer-spin-button</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}[type=&quot;search&quot;]" data-type="css"><a href="#normalize-css-#{$scope}[type=&quot;search&quot;]">#{$scope}[type=&quot;search&quot;]</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}[type=&quot;search&quot;]::-webkit-search-decoration" data-type="css"><a href="#normalize-css-#{$scope}[type=&quot;search&quot;]::-webkit-search-decoration">#{$scope}[type=&quot;search&quot;]::-webkit-search-decoration</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}::-webkit-file-upload-button" data-type="css"><a href="#normalize-css-#{$scope}::-webkit-file-upload-button">#{$scope}::-webkit-file-upload-button</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}details" data-type="css"><a href="#normalize-css-#{$scope}details">#{$scope}details</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}summary" data-type="css"><a href="#normalize-css-#{$scope}summary">#{$scope}summary</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}template" data-type="css"><a href="#normalize-css-#{$scope}template">#{$scope}template</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}[hidden]" data-type="css"><a href="#normalize-css-#{$scope}[hidden]">#{$scope}[hidden]</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="responsive"><a href="#responsive">responsive</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="responsive-mixin"><a href="#responsive-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="auro_breakpoint--lg" data-type="mixin"><a href="#responsive-mixin-auro_breakpoint--lg">auro_breakpoint--lg</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="auro_breakpoint--md" data-type="mixin"><a href="#responsive-mixin-auro_breakpoint--md">auro_breakpoint--md</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="auro_breakpoint--sm" data-type="mixin"><a href="#responsive-mixin-auro_breakpoint--sm">auro_breakpoint--sm</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="auro_breakpoint" data-type="mixin"><a href="#responsive-mixin-auro_breakpoint">auro_breakpoint</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="scope-prefix"><a href="#scope-prefix">scope-prefix</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="scope-prefix-variable"><a href="#scope-prefix-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="scope-prefix" data-name="scope" data-type="variable"><a href="#scope-prefix-variable-scope">scope</a></li><li class="sidebar__item sassdoc__item" data-group="scope-prefix" data-name="prefix" data-type="variable"><a href="#scope-prefix-variable-prefix">prefix</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="utility"><a href="#utility">utility</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-function"><a href="#utility-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility" data-name="auro_capitalize" data-type="function"><a href="#utility-function-auro_capitalize">auro_capitalize</a></li><li class="sidebar__item sassdoc__item" data-group="utility" data-name="auro_contains" data-type="function"><a href="#utility-function-auro_contains">auro_contains</a></li><li class="sidebar__item sassdoc__item" data-group="utility" data-name="auro_map-deep-get" data-type="function"><a href="#utility-function-auro_map-deep-get">auro_map-deep-get</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-variable"><a href="#utility-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility" data-name="important" data-type="variable"><a href="#utility-variable-important">important</a></li><li class="sidebar__item sassdoc__item" data-group="utility" data-name="auro-spacing-options" data-type="variable"><a href="#utility-variable-auro-spacing-options">auro-spacing-options</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="utility-auro"><a href="#utility-auro">utility-auro</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-auro-css"><a href="#utility-auro-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility-auro" data-name="#{$scope}.auro_roleButton" data-type="css"><a href="#utility-auro-css-#{$scope}.auro_roleButton">#{$scope}.auro_roleButton</a></li><li class="sidebar__item sassdoc__item" data-group="utility-auro" data-name="#{$scope}.auro_roleTab" data-type="css"><a href="#utility-auro-css-#{$scope}.auro_roleTab">#{$scope}.auro_roleTab</a></li><li class="sidebar__item sassdoc__item" data-group="utility-auro" data-name="#{$scope}.auro_containedButtons" data-type="css"><a href="#utility-auro-css-#{$scope}.auro_containedButtons">#{$scope}.auro_containedButtons</a></li><li class="sidebar__item sassdoc__item" data-group="utility-auro" data-name="#{$scope}.auro_tablist" data-type="css"><a href="#utility-auro-css-#{$scope}.auro_tablist">#{$scope}.auro_tablist</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="utility-display"><a href="#utility-display">utility-display</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-display-css"><a href="#utility-display-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility-display" data-name="#{$scope}.#{$prefix}util_displayInline" data-type="css"><a href="#utility-display-css-#{$scope}.#{$prefix}util_displayInline">#{$scope}.#{$prefix}util_displayInline</a></li><li class="sidebar__item sassdoc__item" data-group="utility-display" data-name="#{$scope}.#{$prefix}util_displayInlineBlock" data-type="css"><a href="#utility-display-css-#{$scope}.#{$prefix}util_displayInlineBlock">#{$scope}.#{$prefix}util_displayInlineBlock</a></li><li class="sidebar__item sassdoc__item" data-group="utility-display" data-name="#{$scope}.#{$prefix}util_displayBlock" data-type="css"><a href="#utility-display-css-#{$scope}.#{$prefix}util_displayBlock">#{$scope}.#{$prefix}util_displayBlock</a></li><li class="sidebar__item sassdoc__item" data-group="utility-display" data-name="#{$scope}.#{$prefix}util_displayFlex" data-type="css"><a href="#utility-display-css-#{$scope}.#{$prefix}util_displayFlex">#{$scope}.#{$prefix}util_displayFlex</a></li><li class="sidebar__item sassdoc__item" data-group="utility-display" data-name="#{$scope}.#{$prefix}util_displayHidden" data-type="css"><a href="#utility-display-css-#{$scope}.#{$prefix}util_displayHidden">#{$scope}.#{$prefix}util_displayHidden</a></li><li class="sidebar__item sassdoc__item" data-group="utility-display" data-name="#{$scope}.#{$prefix}util_displayHiddenVisually" data-type="css"><a href="#utility-display-css-#{$scope}.#{$prefix}util_displayHiddenVisually">#{$scope}.#{$prefix}util_displayHiddenVisually</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="utility-font"><a href="#utility-font">utility-font</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-font-css"><a href="#utility-font-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility-font" data-name="#{$scope}.#{$prefix}util_fontWeightDefault" data-type="css"><a href="#utility-font-css-#{$scope}.#{$prefix}util_fontWeightDefault">#{$scope}.#{$prefix}util_fontWeightDefault</a></li><li class="sidebar__item sassdoc__item" data-group="utility-font" data-name="#{$scope}.#{$prefix}util_fontWeightMedium" data-type="css"><a href="#utility-font-css-#{$scope}.#{$prefix}util_fontWeightMedium">#{$scope}.#{$prefix}util_fontWeightMedium</a></li><li class="sidebar__item sassdoc__item" data-group="utility-font" data-name="#{$scope}.#{$prefix}util_fontWeightDisplay" data-type="css"><a href="#utility-font-css-#{$scope}.#{$prefix}util_fontWeightDisplay">#{$scope}.#{$prefix}util_fontWeightDisplay</a></li><li class="sidebar__item sassdoc__item" data-group="utility-font" data-name="#{$scope}.#{$prefix}util_body--lg" data-type="css"><a href="#utility-font-css-#{$scope}.#{$prefix}util_body--lg">#{$scope}.#{$prefix}util_body--lg</a></li><li class="sidebar__item sassdoc__item" data-group="utility-font" data-name="#{$scope}.#{$prefix}util_body--sm" data-type="css"><a href="#utility-font-css-#{$scope}.#{$prefix}util_body--sm">#{$scope}.#{$prefix}util_body--sm</a></li><li class="sidebar__item sassdoc__item" data-group="utility-font" data-name="#{$scope}.#{$prefix}util_body--xs" data-type="css"><a href="#utility-font-css-#{$scope}.#{$prefix}util_body--xs">#{$scope}.#{$prefix}util_body--xs</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="utility-layout"><a href="#utility-layout">utility-layout</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-layout-css"><a href="#utility-layout-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility-layout" data-name="#{$scope}.#{$prefix}util_floatLeft" data-type="css"><a href="#utility-layout-css-#{$scope}.#{$prefix}util_floatLeft">#{$scope}.#{$prefix}util_floatLeft</a></li><li class="sidebar__item sassdoc__item" data-group="utility-layout" data-name="#{$scope}.#{$prefix}util_floatRight" data-type="css"><a href="#utility-layout-css-#{$scope}.#{$prefix}util_floatRight">#{$scope}.#{$prefix}util_floatRight</a></li><li class="sidebar__item sassdoc__item" data-group="utility-layout" data-name="#{$scope}.#{$prefix}util_margin--auto" data-type="css"><a href="#utility-layout-css-#{$scope}.#{$prefix}util_margin--auto">#{$scope}.#{$prefix}util_margin--auto</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-layout-mixin"><a href="#utility-layout-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility-layout" data-name="auro_inset" data-type="mixin"><a href="#utility-layout-mixin-auro_inset">auro_inset</a></li><li class="sidebar__item sassdoc__item" data-group="utility-layout" data-name="auro_layoutPropertiesGenerator" data-type="mixin"><a href="#utility-layout-mixin-auro_layoutPropertiesGenerator">auro_layoutPropertiesGenerator</a></li><li class="sidebar__item sassdoc__item" data-group="utility-layout" data-name="auro_spacing" data-type="mixin"><a href="#utility-layout-mixin-auro_spacing">auro_spacing</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="utility-mixins"><a href="#utility-mixins">utility-mixins</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-mixins-mixin"><a href="#utility-mixins-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility-mixins" data-name="auro_anchorButton" data-type="mixin"><a href="#utility-mixins-mixin-auro_anchorButton">auro_anchorButton</a></li><li class="sidebar__item sassdoc__item" data-group="utility-mixins" data-name="auro_anchorTab" data-type="mixin"><a href="#utility-mixins-mixin-auro_anchorTab">auro_anchorTab</a></li><li class="sidebar__item sassdoc__item" data-group="utility-mixins" data-name="auro_focus-hyperlink" data-type="mixin"><a href="#utility-mixins-mixin-auro_focus-hyperlink">auro_focus-hyperlink</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="utility-responsive"><a href="#utility-responsive">utility-responsive</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-responsive-css"><a href="#utility-responsive-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_is-smOnly" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_is-smOnly">#{$scope}.#{$prefix}util_is-smOnly</a></li><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_is-mdOnly" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_is-mdOnly">#{$scope}.#{$prefix}util_is-mdOnly</a></li><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_is-mdOnly--inline" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_is-mdOnly--inline">#{$scope}.#{$prefix}util_is-mdOnly--inline</a></li><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_is-mdAppears" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_is-mdAppears">#{$scope}.#{$prefix}util_is-mdAppears</a></li><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_is-mdAppears--inline" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_is-mdAppears--inline">#{$scope}.#{$prefix}util_is-mdAppears--inline</a></li><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_is-lgOnly" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_is-lgOnly">#{$scope}.#{$prefix}util_is-lgOnly</a></li><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_is-lgOnly--inline" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_is-lgOnly--inline">#{$scope}.#{$prefix}util_is-lgOnly--inline</a></li><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_img-is-responsive" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_img-is-responsive">#{$scope}.#{$prefix}util_img-is-responsive</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="†deprecated"><a href="#†deprecated">†deprecated</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="†deprecated-mixin"><a href="#†deprecated-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="transition" data-type="mixin"><a href="#†deprecated-mixin-transition">transition</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="phone-large" data-type="mixin"><a href="#†deprecated-mixin-phone-large">phone-large</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="tablet" data-type="mixin"><a href="#†deprecated-mixin-tablet">tablet</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="breakpoint-max" data-type="mixin"><a href="#†deprecated-mixin-breakpoint-max">breakpoint-max</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="breakpoint-wide" data-type="mixin"><a href="#†deprecated-mixin-breakpoint-wide">breakpoint-wide</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="breakpoint-medium" data-type="mixin"><a href="#†deprecated-mixin-breakpoint-medium">breakpoint-medium</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="breakpoint-narrow" data-type="mixin"><a href="#†deprecated-mixin-breakpoint-narrow">breakpoint-narrow</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="breakpoint" data-type="mixin"><a href="#†deprecated-mixin-breakpoint">breakpoint</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="anchorButton" data-type="mixin"><a href="#†deprecated-mixin-anchorButton">anchorButton</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="anchorTab" data-type="mixin"><a href="#†deprecated-mixin-anchorTab">anchorTab</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="focus-hyperlink" data-type="mixin"><a href="#†deprecated-mixin-focus-hyperlink">focus-hyperlink</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="focus-button" data-type="mixin"><a href="#†deprecated-mixin-focus-button">focus-button</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="auro_focus-button" data-type="mixin"><a href="#†deprecated-mixin-auro_focus-button">auro_focus-button</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="†deprecated-css"><a href="#†deprecated-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="html" data-type="css"><a href="#†deprecated-css-html">html</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="body,
+#{$scope}[type=&quot;number&quot;]::-webkit-outer-spin-button">#{$scope}[type=&quot;number&quot;]::-webkit-inner-spin-button, #{$scope}[type=&quot;number&quot;]::-webkit-outer-spin-button</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}[type=&quot;search&quot;]" data-type="css"><a href="#normalize-css-#{$scope}[type=&quot;search&quot;]">#{$scope}[type=&quot;search&quot;]</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}[type=&quot;search&quot;]::-webkit-search-decoration" data-type="css"><a href="#normalize-css-#{$scope}[type=&quot;search&quot;]::-webkit-search-decoration">#{$scope}[type=&quot;search&quot;]::-webkit-search-decoration</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}::-webkit-file-upload-button" data-type="css"><a href="#normalize-css-#{$scope}::-webkit-file-upload-button">#{$scope}::-webkit-file-upload-button</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}details" data-type="css"><a href="#normalize-css-#{$scope}details">#{$scope}details</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}summary" data-type="css"><a href="#normalize-css-#{$scope}summary">#{$scope}summary</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}template" data-type="css"><a href="#normalize-css-#{$scope}template">#{$scope}template</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}[hidden]" data-type="css"><a href="#normalize-css-#{$scope}[hidden]">#{$scope}[hidden]</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="responsive"><a href="#responsive">responsive</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="responsive-mixin"><a href="#responsive-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="auro_breakpoint--lg" data-type="mixin"><a href="#responsive-mixin-auro_breakpoint--lg">auro_breakpoint--lg</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="auro_breakpoint--md" data-type="mixin"><a href="#responsive-mixin-auro_breakpoint--md">auro_breakpoint--md</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="auro_breakpoint--sm" data-type="mixin"><a href="#responsive-mixin-auro_breakpoint--sm">auro_breakpoint--sm</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="auro_breakpoint" data-type="mixin"><a href="#responsive-mixin-auro_breakpoint">auro_breakpoint</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="scope-prefix"><a href="#scope-prefix">scope-prefix</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="scope-prefix-variable"><a href="#scope-prefix-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="scope-prefix" data-name="scope" data-type="variable"><a href="#scope-prefix-variable-scope">scope</a></li><li class="sidebar__item sassdoc__item" data-group="scope-prefix" data-name="prefix" data-type="variable"><a href="#scope-prefix-variable-prefix">prefix</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="undefined"><a href="#undefined">General</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-css"><a href="#undefined-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="// Auro rule
+@if variable-exists(auro-asset-font-circular-family-name)" data-type="css"><a href="#undefined-css-// Auro rule
+@if variable-exists(auro-asset-font-circular-family-name)">// Auro rule @if variable-exists(auro-asset-font-circular-family-name)</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="utility"><a href="#utility">utility</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-function"><a href="#utility-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility" data-name="auro_capitalize" data-type="function"><a href="#utility-function-auro_capitalize">auro_capitalize</a></li><li class="sidebar__item sassdoc__item" data-group="utility" data-name="auro_contains" data-type="function"><a href="#utility-function-auro_contains">auro_contains</a></li><li class="sidebar__item sassdoc__item" data-group="utility" data-name="auro_map-deep-get" data-type="function"><a href="#utility-function-auro_map-deep-get">auro_map-deep-get</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-variable"><a href="#utility-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility" data-name="important" data-type="variable"><a href="#utility-variable-important">important</a></li><li class="sidebar__item sassdoc__item" data-group="utility" data-name="auro-spacing-options" data-type="variable"><a href="#utility-variable-auro-spacing-options">auro-spacing-options</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="utility-auro"><a href="#utility-auro">utility-auro</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-auro-css"><a href="#utility-auro-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility-auro" data-name="#{$scope}.auro_roleButton" data-type="css"><a href="#utility-auro-css-#{$scope}.auro_roleButton">#{$scope}.auro_roleButton</a></li><li class="sidebar__item sassdoc__item" data-group="utility-auro" data-name="#{$scope}.auro_roleTab" data-type="css"><a href="#utility-auro-css-#{$scope}.auro_roleTab">#{$scope}.auro_roleTab</a></li><li class="sidebar__item sassdoc__item" data-group="utility-auro" data-name="#{$scope}.auro_containedButtons" data-type="css"><a href="#utility-auro-css-#{$scope}.auro_containedButtons">#{$scope}.auro_containedButtons</a></li><li class="sidebar__item sassdoc__item" data-group="utility-auro" data-name="#{$scope}.auro_tablist" data-type="css"><a href="#utility-auro-css-#{$scope}.auro_tablist">#{$scope}.auro_tablist</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="utility-display"><a href="#utility-display">utility-display</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-display-css"><a href="#utility-display-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility-display" data-name="#{$scope}.#{$prefix}util_displayInline" data-type="css"><a href="#utility-display-css-#{$scope}.#{$prefix}util_displayInline">#{$scope}.#{$prefix}util_displayInline</a></li><li class="sidebar__item sassdoc__item" data-group="utility-display" data-name="#{$scope}.#{$prefix}util_displayInlineBlock" data-type="css"><a href="#utility-display-css-#{$scope}.#{$prefix}util_displayInlineBlock">#{$scope}.#{$prefix}util_displayInlineBlock</a></li><li class="sidebar__item sassdoc__item" data-group="utility-display" data-name="#{$scope}.#{$prefix}util_displayBlock" data-type="css"><a href="#utility-display-css-#{$scope}.#{$prefix}util_displayBlock">#{$scope}.#{$prefix}util_displayBlock</a></li><li class="sidebar__item sassdoc__item" data-group="utility-display" data-name="#{$scope}.#{$prefix}util_displayFlex" data-type="css"><a href="#utility-display-css-#{$scope}.#{$prefix}util_displayFlex">#{$scope}.#{$prefix}util_displayFlex</a></li><li class="sidebar__item sassdoc__item" data-group="utility-display" data-name="#{$scope}.#{$prefix}util_displayHidden" data-type="css"><a href="#utility-display-css-#{$scope}.#{$prefix}util_displayHidden">#{$scope}.#{$prefix}util_displayHidden</a></li><li class="sidebar__item sassdoc__item" data-group="utility-display" data-name="#{$scope}.#{$prefix}util_displayHiddenVisually" data-type="css"><a href="#utility-display-css-#{$scope}.#{$prefix}util_displayHiddenVisually">#{$scope}.#{$prefix}util_displayHiddenVisually</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="utility-font"><a href="#utility-font">utility-font</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-font-css"><a href="#utility-font-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility-font" data-name="#{$scope}.#{$prefix}util_fontWeightDefault" data-type="css"><a href="#utility-font-css-#{$scope}.#{$prefix}util_fontWeightDefault">#{$scope}.#{$prefix}util_fontWeightDefault</a></li><li class="sidebar__item sassdoc__item" data-group="utility-font" data-name="#{$scope}.#{$prefix}util_fontWeightMedium" data-type="css"><a href="#utility-font-css-#{$scope}.#{$prefix}util_fontWeightMedium">#{$scope}.#{$prefix}util_fontWeightMedium</a></li><li class="sidebar__item sassdoc__item" data-group="utility-font" data-name="#{$scope}.#{$prefix}util_fontWeightDisplay" data-type="css"><a href="#utility-font-css-#{$scope}.#{$prefix}util_fontWeightDisplay">#{$scope}.#{$prefix}util_fontWeightDisplay</a></li><li class="sidebar__item sassdoc__item" data-group="utility-font" data-name="#{$scope}.#{$prefix}util_body--lg" data-type="css"><a href="#utility-font-css-#{$scope}.#{$prefix}util_body--lg">#{$scope}.#{$prefix}util_body--lg</a></li><li class="sidebar__item sassdoc__item" data-group="utility-font" data-name="#{$scope}.#{$prefix}util_body--sm" data-type="css"><a href="#utility-font-css-#{$scope}.#{$prefix}util_body--sm">#{$scope}.#{$prefix}util_body--sm</a></li><li class="sidebar__item sassdoc__item" data-group="utility-font" data-name="#{$scope}.#{$prefix}util_body--xs" data-type="css"><a href="#utility-font-css-#{$scope}.#{$prefix}util_body--xs">#{$scope}.#{$prefix}util_body--xs</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="utility-layout"><a href="#utility-layout">utility-layout</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-layout-css"><a href="#utility-layout-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility-layout" data-name="#{$scope}.#{$prefix}util_floatLeft" data-type="css"><a href="#utility-layout-css-#{$scope}.#{$prefix}util_floatLeft">#{$scope}.#{$prefix}util_floatLeft</a></li><li class="sidebar__item sassdoc__item" data-group="utility-layout" data-name="#{$scope}.#{$prefix}util_floatRight" data-type="css"><a href="#utility-layout-css-#{$scope}.#{$prefix}util_floatRight">#{$scope}.#{$prefix}util_floatRight</a></li><li class="sidebar__item sassdoc__item" data-group="utility-layout" data-name="#{$scope}.#{$prefix}util_margin--auto" data-type="css"><a href="#utility-layout-css-#{$scope}.#{$prefix}util_margin--auto">#{$scope}.#{$prefix}util_margin--auto</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-layout-mixin"><a href="#utility-layout-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility-layout" data-name="auro_inset" data-type="mixin"><a href="#utility-layout-mixin-auro_inset">auro_inset</a></li><li class="sidebar__item sassdoc__item" data-group="utility-layout" data-name="auro_layoutPropertiesGenerator" data-type="mixin"><a href="#utility-layout-mixin-auro_layoutPropertiesGenerator">auro_layoutPropertiesGenerator</a></li><li class="sidebar__item sassdoc__item" data-group="utility-layout" data-name="auro_spacing" data-type="mixin"><a href="#utility-layout-mixin-auro_spacing">auro_spacing</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="utility-mixins"><a href="#utility-mixins">utility-mixins</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-mixins-mixin"><a href="#utility-mixins-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility-mixins" data-name="auro_anchorButton" data-type="mixin"><a href="#utility-mixins-mixin-auro_anchorButton">auro_anchorButton</a></li><li class="sidebar__item sassdoc__item" data-group="utility-mixins" data-name="auro_anchorTab" data-type="mixin"><a href="#utility-mixins-mixin-auro_anchorTab">auro_anchorTab</a></li><li class="sidebar__item sassdoc__item" data-group="utility-mixins" data-name="auro_focus-hyperlink" data-type="mixin"><a href="#utility-mixins-mixin-auro_focus-hyperlink">auro_focus-hyperlink</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="utility-responsive"><a href="#utility-responsive">utility-responsive</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="utility-responsive-css"><a href="#utility-responsive-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_is-smOnly" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_is-smOnly">#{$scope}.#{$prefix}util_is-smOnly</a></li><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_is-mdOnly" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_is-mdOnly">#{$scope}.#{$prefix}util_is-mdOnly</a></li><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_is-mdOnly--inline" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_is-mdOnly--inline">#{$scope}.#{$prefix}util_is-mdOnly--inline</a></li><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_is-mdAppears" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_is-mdAppears">#{$scope}.#{$prefix}util_is-mdAppears</a></li><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_is-mdAppears--inline" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_is-mdAppears--inline">#{$scope}.#{$prefix}util_is-mdAppears--inline</a></li><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_is-lgOnly" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_is-lgOnly">#{$scope}.#{$prefix}util_is-lgOnly</a></li><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_is-lgOnly--inline" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_is-lgOnly--inline">#{$scope}.#{$prefix}util_is-lgOnly--inline</a></li><li class="sidebar__item sassdoc__item" data-group="utility-responsive" data-name="#{$scope}.#{$prefix}util_img-is-responsive" data-type="css"><a href="#utility-responsive-css-#{$scope}.#{$prefix}util_img-is-responsive">#{$scope}.#{$prefix}util_img-is-responsive</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="†deprecated"><a href="#†deprecated">†deprecated</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="†deprecated-mixin"><a href="#†deprecated-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="transition" data-type="mixin"><a href="#†deprecated-mixin-transition">transition</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="phone-large" data-type="mixin"><a href="#†deprecated-mixin-phone-large">phone-large</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="tablet" data-type="mixin"><a href="#†deprecated-mixin-tablet">tablet</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="breakpoint-max" data-type="mixin"><a href="#†deprecated-mixin-breakpoint-max">breakpoint-max</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="breakpoint-wide" data-type="mixin"><a href="#†deprecated-mixin-breakpoint-wide">breakpoint-wide</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="breakpoint-medium" data-type="mixin"><a href="#†deprecated-mixin-breakpoint-medium">breakpoint-medium</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="breakpoint-narrow" data-type="mixin"><a href="#†deprecated-mixin-breakpoint-narrow">breakpoint-narrow</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="breakpoint" data-type="mixin"><a href="#†deprecated-mixin-breakpoint">breakpoint</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="anchorButton" data-type="mixin"><a href="#†deprecated-mixin-anchorButton">anchorButton</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="anchorTab" data-type="mixin"><a href="#†deprecated-mixin-anchorTab">anchorTab</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="focus-hyperlink" data-type="mixin"><a href="#†deprecated-mixin-focus-hyperlink">focus-hyperlink</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="focus-button" data-type="mixin"><a href="#†deprecated-mixin-focus-button">focus-button</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="auro_focus-button" data-type="mixin"><a href="#†deprecated-mixin-auro_focus-button">auro_focus-button</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="†deprecated-css"><a href="#†deprecated-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="html" data-type="css"><a href="#†deprecated-css-html">html</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="body,
 .baseType" data-type="css"><a href="#†deprecated-css-body,
 .baseType">body, .baseType</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".baseParagraph" data-type="css"><a href="#†deprecated-css-.baseParagraph">.baseParagraph</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name=".hyperlink" data-type="css"><a href="#†deprecated-css-.hyperlink">.hyperlink</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="img" data-type="css"><a href="#†deprecated-css-img">img</a></li><li class="sidebar__item sassdoc__item" data-group="†deprecated" data-name="small,
 .type--small" data-type="css"><a href="#†deprecated-css-small,
@@ -549,7 +551,21 @@
   }
 }</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="scope-prefix"><div class="container">scope-prefix</div></h1><section class="main__sub-section" id="scope-prefix-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="scope-prefix-variable-scope"><h3 class="item__heading"><a class="item__name" href="#variable-scope">scope</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$scope: null !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Variables to determine if <code>$scope</code> is to be displayed.</p><p>Set <code>true</code> value prior to importing file if scope selector output file is wanted</p></div><h3 class="item__sub-heading">Type</h3><p><code>Boolean</code></p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>$scope: true;
 @import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/ ...</code></pre></div><div class="item__example example"><div class="example__description"><p>return example</p></div><pre class="example__code language-scss"><code>.auro [selector] { ... }</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_inset"><code>auro_inset</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_inset"><code>auro_inset</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_layoutPropertiesGenerator"><code>auro_layoutPropertiesGenerator</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_spacing"><code>auro_spacing</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_spacing"><code>auro_spacing</code></a></li></ul></section><section class="main__item container item" id="scope-prefix-variable-prefix"><h3 class="item__heading"><a class="item__name" href="#variable-prefix">prefix</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$prefix: null !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Variables to determine if $prefix is to be displayed</p><p>Set <code>true</code> value prior to importing file if prefix selector output file is wanted</p></div><h3 class="item__sub-heading">Type</h3><p><code>Boolean</code></p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>$prefix: true;
-@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/ ...</code></pre></div><div class="item__example example"><div class="example__description"><p>return example</p></div><pre class="example__code language-scss"><code>.auro_[selector] { ... }</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_inset"><code>auro_inset</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_inset"><code>auro_inset</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_layoutPropertiesGenerator"><code>auro_layoutPropertiesGenerator</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_spacing"><code>auro_spacing</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_spacing"><code>auro_spacing</code></a></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="utility"><div class="container">utility</div></h1><section class="main__sub-section" id="utility-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="utility-function-auro_capitalize"><h3 class="item__heading"><a class="item__name" href="#function-auro_capitalize">auro_capitalize</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function auro_capitalize($string: null) { 
+@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/ ...</code></pre></div><div class="item__example example"><div class="example__description"><p>return example</p></div><pre class="example__code language-scss"><code>.auro_[selector] { ... }</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_inset"><code>auro_inset</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_inset"><code>auro_inset</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_layoutPropertiesGenerator"><code>auro_layoutPropertiesGenerator</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_spacing"><code>auro_spacing</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_spacing"><code>auro_spacing</code></a></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="undefined"><div class="container">General</div></h1><section class="main__sub-section" id="undefined-css"><h2 class="main__heading--secondary"><div class="container">css</div></h2><section class="main__item container item" id="undefined-css-// Auro rule
+@if variable-exists(auro-asset-font-circular-family-name)"><h3 class="item__heading"><a class="item__name" href="#css-// Auro rule
+@if variable-exists(auro-asset-font-circular-family-name)">// Auro rule @if variable-exists(auro-asset-font-circular-family-name)</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>// Auro rule
+@if variable-exists(auro-asset-font-circular-family-name) {
+  @font-face {
+    font-family: $auro-asset-font-circular-family-name;
+    src: url(&quot;https://resource.alaskaair.net/-/media/4E8D77C0D7A8411AB9C351C1EFF86681.woff2&quot;) format(&quot;woff2&quot;),
+    url(&quot;https://resource.alaskaair.net/-/media/CAAEEC88586944808EDE9B36A3460098.woff&quot;) format(&quot;woff&quot;);
+    font-weight: $auro-text-heading-display-weight;
+    font-style: normal;
+    font-display: fallback;
+  }
+}</code>" data-collapsed="// Auro rule
+@if variable-exists(auro-asset-font-circular-family-name) { ... }"><code>// Auro rule
+@if variable-exists(auro-asset-font-circular-family-name) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Baseline font-face setting for using web based custom fonts - font weight light</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import src file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts&quot;;</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="utility"><div class="container">utility</div></h1><section class="main__sub-section" id="utility-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="utility-function-auro_capitalize"><h3 class="item__heading"><a class="item__name" href="#function-auro_capitalize">auro_capitalize</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function auro_capitalize($string: null) { 
   @return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
  }" data-collapsed="@function auro_capitalize($string: null) { ... }"><code>@function auro_capitalize($string: null) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>The purpose of this function is to take a string and capitalize the first letter on output</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$string</code></th><td data-label="desc"><p>pass in string to be capitolized</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>null</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>pass string into function</p></div><pre class="example__code language-scss"><code>capitalize(&#39;foo&#39;) =&gt; Foo</code></pre></div><div class="item__example example"><div class="example__description"><p>import dependency</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityFunctions/capitalize&quot;;</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_inset"><code>auro_inset</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_inset"><code>auro_inset</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_spacing"><code>auro_spacing</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_spacing"><code>auro_spacing</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_spacing"><code>auro_spacing</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#utility-layout-mixin-auro_spacing"><code>auro_spacing</code></a></li></ul></section><section class="main__item container item" id="utility-function-auro_contains"><h3 class="item__heading"><a class="item__name" href="#function-auro_contains">auro_contains</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function auro_contains($list: null, $var) { 
   $eval: false;
@@ -599,12 +615,12 @@
   }
 
   &amp;--reverse {
-    @include breakpoint-medium {
+    @include auro_breakpoint--md {
       justify-content: flex-end;
     }
   }
 
-  @include breakpoint-medium {
+  @include auro_breakpoint--md {
     flex-direction: row;
 
     &gt; * {
@@ -627,7 +643,7 @@
     }
   }
 }</code>" data-collapsed="#{$scope}.auro_containedButtons { ... }"><code>#{$scope}.auro_containedButtons { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p><code>.auro_containedButtons</code> is a helper class to support the use of multiple buttons and/or the use of ods-hyperlink <code>role=&quot;button&quot;</code> in a parent container.</p><p><code>.auro_containedButtons</code> has a dependency on OWCSS breakpoints. See example below to import dependency.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> options.</p><p>Place selector on outer parent element.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.auro_containedButtons {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .auro_containedButtons {}</code></pre></div><div class="item__example example"><div class="example__description"><p>import selector file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/containedButtons&quot;;</code></pre></div><div class="item__example example"><div class="example__description"><p>import dependency file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints&quot;;</code></pre></div></section><section class="main__item container item" id="utility-auro-css-#{$scope}.auro_tablist"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.auro_tablist">#{$scope}.auro_tablist</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.auro_tablist {
-  @include breakpoint-narrow {
+  @include auro_breakpoint--sm {
     overflow-y: unset;
     white-space: unset;
   }
@@ -1421,62 +1437,68 @@
 .baseType {
   @include deprecated(&#39;selctors body, .baseType&#39;);
 
-  margin: 0;
-  font-family: $auro-font-family-default;
-  font-weight: $weight-book;
-  font-size: $size-font-breakpoint-all-med;
-  line-height: $vertical-alignment-body;
-  color: $color-type-theme-light-primary;
+  @if variable-exists(font-family-base) {
+    margin: 0;
+    font-family: $font-family-base;
+    font-weight: $weight-book;
+    font-size: $size-font-breakpoint-all-med;
+    line-height: $vertical-alignment-body;
+    color: $color-type-theme-light-primary;
+  }
 }</code>" data-collapsed="body,
 .baseType { ... }"><code>body,
 .baseType { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Set baseline type settings for <code>body</code> elment or with the use of the <code>.baseType</code> selector.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.baseParagraph"><h3 class="item__heading"><a class="item__name" href="#css-.baseParagraph">.baseParagraph</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>essentials.scss</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.baseParagraph {
   @include deprecated(&#39;selctor .baseParagraph&#39;);
 
-  margin-bottom: $size-margin-baseline;
+  @if variable-exists(size-margin-baseline) {
+    margin-bottom: $size-margin-baseline;
 
-  .hyperlink {
-    text-decoration: underline;
+    .hyperlink {
+      text-decoration: underline;
+    }
   }
 }</code>" data-collapsed=".baseParagraph { ... }"><code>.baseParagraph { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Sets standard <code>margin-bottom</code> for all paragraph style content</p><p>Use of nested <code>.hyperlink</code> defines underline text-decoration for anchor tags</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.hyperlink"><h3 class="item__heading"><a class="item__name" href="#css-.hyperlink">.hyperlink</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>essentials.scss</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.hyperlink {
   @include deprecated(&#39;selctor .hyperlink&#39;);
 
-  color: $color-type-theme-light-link;
-  padding: 0 $size-scale-sml;
-  text-decoration: none;
-
-  &amp;:visited {
+  @if variable-exists(color-type-theme-light-link) {
     color: $color-type-theme-light-link;
-  }
-
-  &amp;--inline {
-    padding: 0;
-    text-decoration: underline;
+    padding: 0 $size-scale-sml;
+    text-decoration: none;
 
-    &amp;:not(.is-touching) {
-      &amp;:hover {
-        text-decoration: none !important;  // sass-lint:disable-line no-important
-      }
+    &amp;:visited {
+      color: $color-type-theme-light-link;
     }
-  }
 
-  &amp;--darktheme {
-    color: $color-type-theme-dark-link;
+    &amp;--inline {
+      padding: 0;
+      text-decoration: underline;
 
-    &amp;:not(.is-touching) {
-      &amp;:hover {
-        color: $color-type-theme-dark-link-hover;
+      &amp;:not(.is-touching) {
+        &amp;:hover {
+          text-decoration: none !important;  // sass-lint:disable-line no-important
+        }
       }
     }
 
-    &amp;:visited {
+    &amp;--darktheme {
       color: $color-type-theme-dark-link;
+
+      &amp;:not(.is-touching) {
+        &amp;:hover {
+          color: $color-type-theme-dark-link-hover;
+        }
+      }
+
+      &amp;:visited {
+        color: $color-type-theme-dark-link;
+      }
     }
-  }
 
-  &amp;:not(.is-touching) {
-    &amp;:hover {
-      color: $color-type-theme-light-link-hover;
-      text-decoration: underline;
+    &amp;:not(.is-touching) {
+      &amp;:hover {
+        color: $color-type-theme-light-link-hover;
+        text-decoration: underline;
+      }
     }
   }
 }</code>" data-collapsed=".hyperlink { ... }"><code>.hyperlink { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Baseline hyperlink styles as mirrored in ods-hyperlink</p><p>Support for: <code>.hyperlink--inline</code>, and <code>.hyperlink--darktheme</code></p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-img"><h3 class="item__heading"><a class="item__name" href="#css-img">img</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>essentials.scss</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>img {
@@ -1489,47 +1511,59 @@
 .type--small {
   @include deprecated(&#39;selctors small, .type--small&#39;);
 
-  font-size: $size-font-breakpoint-all-small;
+  @if variable-exists(color-type-theme-light-link) {
+    font-size: $size-font-breakpoint-all-small;
+  }
 }</code>" data-collapsed="small,
 .type--small { ... }"><code>small,
 .type--small { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Legal copy, disclaimers, and footnotes below applicable content section. Above input as floating label, below input as help or error text.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Example HTML selector use</p></div><pre class="example__code language-html"><code>&lt;small&gt; ... &lt;/small&gt;` or `&lt;element class=&quot;type--small&quot;&gt; ... &lt;/element&gt;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.heading"><h3 class="item__heading"><a class="item__name" href="#css-.heading">.heading</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.heading</code> in new <code>_headings.scss</code> file</p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.heading {
   @include deprecated(&#39;selctor .heading&#39;);
 
-  margin: $size-margin-header-y-axis $size-margin-header-x-axis;
-  font-weight: inherit;
-  line-height: $vertical-alignment-heading;
+  @if variable-exists(color-type-theme-light-link) {
+    margin: $size-margin-header-y-axis $size-margin-header-x-axis;
+    font-weight: inherit;
+    line-height: $vertical-alignment-heading;
+  }
 }</code>" data-collapsed=".heading { ... }"><code>.heading { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Baseline block Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. <code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Example HTML selector use</p></div><pre class="example__code language-html"><code>&lt;element class=&quot;heading&quot;&gt; ... &lt;/element&gt;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.heading--max"><h3 class="item__heading"><a class="item__name" href="#css-.heading--max">.heading--max</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.heading--display</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.heading--max {
   @include deprecated(&#39;selctor .heading--max&#39;);
 
-  font-size: $size-font-breakpoint-mobile-max;
-  margin-top: 0;
+  @if variable-exists(color-type-theme-light-link) {
+    font-size: $size-font-breakpoint-mobile-max;
+    margin-top: 0;
 
-  @include breakpoint-medium {
-    font-size: $size-font-breakpoint-desktop-max;
+    @include breakpoint-medium {
+      font-size: $size-font-breakpoint-desktop-max;
+    }
   }
 }</code>" data-collapsed=".heading--max { ... }"><code>.heading--max { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with <code>.heading</code> selector</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Example HTML selector use</p></div><pre class="example__code language-html"><code>&lt;element class=&quot;heading heading--max&quot;&gt; ... &lt;/element&gt;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.heading--xxl"><h3 class="item__heading"><a class="item__name" href="#css-.heading--xxl">.heading--xxl</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.heading--800</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.heading--xxl {
   @include deprecated(&#39;selctor .heading--xxl&#39;);
 
-  font-size: $size-font-breakpoint-mobile-xxl;
+  @if variable-exists(color-type-theme-light-link) {
+    font-size: $size-font-breakpoint-mobile-xxl;
 
-  @include breakpoint-medium {
-    font-size: $size-font-breakpoint-desktop-xxl;
+    @include breakpoint-medium {
+      font-size: $size-font-breakpoint-desktop-xxl;
+    }
   }
 }</code>" data-collapsed=".heading--xxl { ... }"><code>.heading--xxl { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Section title for content relating to the main title. Secondary Headings or titles. Used in conjunction with <code>.heading</code> selector</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Example HTML selector use</p></div><pre class="example__code language-html"><code>&lt;element class=&quot;heading heading--xxl&quot;&gt; ... &lt;/element&gt;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.heading--xl"><h3 class="item__heading"><a class="item__name" href="#css-.heading--xl">.heading--xl</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.heading--700</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.heading--xl {
   @include deprecated(&#39;selctor .heading--xl&#39;);
 
-  font-size: $size-font-breakpoint-mobile-xl;
+  @if variable-exists(color-type-theme-light-link) {
+    font-size: $size-font-breakpoint-mobile-xl;
 
-  @include breakpoint-medium {
-    font-size: $size-font-breakpoint-desktop-xl;
+    @include breakpoint-medium {
+      font-size: $size-font-breakpoint-desktop-xl;
+    }
   }
 }</code>" data-collapsed=".heading--xl { ... }"><code>.heading--xl { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Subtitle for main title or specific sub-section content relating to a section. Used in conjunction with <code>.heading</code> selector</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Example HTML selector use</p></div><pre class="example__code language-html"><code>&lt;element class=&quot;heading heading--xl&quot;&gt; ... &lt;/element&gt;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.heading--lg"><h3 class="item__heading"><a class="item__name" href="#css-.heading--lg">.heading--lg</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.heading--600</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.heading--lg {
   @include deprecated(&#39;selctor .heading--lg&#39;);
 
-  font-size: $size-font-breakpoint-mobile-lg;
+  @if variable-exists(color-type-theme-light-link) {
+    font-size: $size-font-breakpoint-mobile-lg;
 
-  @include breakpoint-medium {
-    font-size: $size-font-breakpoint-desktop-lg;
+    @include breakpoint-medium {
+      font-size: $size-font-breakpoint-desktop-lg;
+    }
   }
 }</code>" data-collapsed=".heading--lg { ... }"><code>.heading--lg { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Label for content relating to a specific sub-section. Can follow any title. Used in conjunction with <code>.heading</code> selector</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Example HTML selector use</p></div><pre class="example__code language-html"><code>&lt;element class=&quot;heading heading--lg&quot;&gt; ... &lt;/element&gt;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-*"><h3 class="item__heading"><a class="item__name" href="#css-*">*</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>core.scss</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>* {
   &amp;,
@@ -1551,80 +1585,88 @@
 }</code>" data-collapsed=".focus-visible :focus:not(.focus-visible) { ... }"><code>.focus-visible :focus:not(.focus-visible) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Selector set to enable use of <a href="https://www.npmjs.com/package/focus-visible">focus visible</a> polyfill.</p><p>Based on the proposed CSS <code>:focus-visible</code> pseudo-selector, this prototype adds a <code>focus-visible</code> class to the focused element, in situations in which the <code>:focus-visible</code> pseudo-selector should match.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.ods-roleButton"><h3 class="item__heading"><a class="item__name" href="#css-.ods-roleButton">.ods-roleButton</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>See <code>.auro_roleButton</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.ods-roleButton {
   @include deprecated(&#39;selctor .ods-roleButton&#39;);
 
-  @include anchorButton(sass, noncomponent);
+  @if variable-exists(color-type-theme-light-link) {
+    @include anchorButton(sass, noncomponent);
+  }
 }</code>" data-collapsed=".ods-roleButton { ... }"><code>.ods-roleButton { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p><code>.ods-roleButton</code> is a helper class to support the UI of a hyperlink using <code>role=&quot;button&quot;</code></p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import selector file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleButton&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.ods-roleTab"><h3 class="item__heading"><a class="item__name" href="#css-.ods-roleTab">.ods-roleTab</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.auro_roleTab</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.ods-roleTab {
   @include deprecated(&#39;selctor .ods-roleTab&#39;);
 
-  @include anchorTab(sass, noncomponent);
-  margin-right: calc(#{$size-scale-micro} * -1);
+  @if variable-exists(color-type-theme-light-link) {
+    @include anchorTab(sass, noncomponent);
+    margin-right: calc(#{$size-scale-micro} * -1);
+  }
 }</code>" data-collapsed=".ods-roleTab { ... }"><code>.ods-roleTab { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p><code>.ods-roleTab</code> is a helper class to support the UI of a hyperlink using <code>role=&quot;tab&quot;</code></p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import selector file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleTab&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.ods-containedButtons"><h3 class="item__heading"><a class="item__name" href="#css-.ods-containedButtons">.ods-containedButtons</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.auro_containedButtons</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.ods-containedButtons {
   @include deprecated(&#39;selctor .ods-containedButtons&#39;);
 
-  display: flex;
-  flex-direction: column;
+  @if variable-exists(breakpoint-width-medium) {
+    display: flex;
+    flex-direction: column;
 
-  &gt; * {
-    margin-bottom: 1rem;
+    &gt; * {
+      margin-bottom: 1rem;
 
-    &amp;:last-child {
-      margin-bottom: 0;
+      &amp;:last-child {
+        margin-bottom: 0;
+      }
     }
-  }
 
-  ods-button {
-    order: -1;
-  }
+    ods-button {
+      order: -1;
+    }
 
-  [role=button] {
-    margin-bottom: 0;
-    width: 100%;
-    text-align: center;
-  }
+    [role=button] {
+      margin-bottom: 0;
+      width: 100%;
+      text-align: center;
+    }
 
-  &amp;--reverse {
-    @include breakpoint-medium {
-      justify-content: flex-end;
+    &amp;--reverse {
+      @include breakpoint-medium {
+        justify-content: flex-end;
+      }
     }
-  }
 
-  @include breakpoint-medium {
-    flex-direction: row;
+    @include breakpoint-medium {
+      flex-direction: row;
 
-    &gt; * {
-      margin-left: 1rem;
-      margin-bottom: 0;
+      &gt; * {
+        margin-left: 1rem;
+        margin-bottom: 0;
 
-      &amp;:first-child {
-        margin-left: 0;
+        &amp;:first-child {
+          margin-left: 0;
+        }
       }
-    }
 
-    ods-button {
-      order: inherit;
-    }
+      ods-button {
+        order: inherit;
+      }
 
-    [role=button] {
-      margin: inherit;
-      width: inherit;
-      text-align: inherit;
+      [role=button] {
+        margin: inherit;
+        width: inherit;
+        text-align: inherit;
+      }
     }
   }
 }</code>" data-collapsed=".ods-containedButtons { ... }"><code>.ods-containedButtons { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p><code>.ods-containedButtons</code> is a helper class to support the use of multiple buttons and/or the use of ods-hyperlink <code>role=&quot;button&quot;</code> in a parent container.</p><p><code>.ods-containedButtons</code> has a dependency on OWCSS breakpoints. See example below to import dependency.</p><p>Place selector on outer parent element.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import selector file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/containedButtons&quot;;</code></pre></div><div class="item__example example"><div class="example__description"><p>import dependency file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.ods-tablist"><h3 class="item__heading"><a class="item__name" href="#css-.ods-tablist">.ods-tablist</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.auro_tablist</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.ods-tablist {
   @include deprecated(&#39;selctor .ods-tablist&#39;);
 
-  @include breakpoint-narrow {
-    overflow-y: unset;
-    white-space: unset;
-  }
+  @if variable-exists(breakpoint-width-narrow) {
+    @include breakpoint-narrow {
+      overflow-y: unset;
+      white-space: unset;
+    }
 
-  border-width: 0 0 1px 0;
-  border-style: solid;
-  border-color: $color-background-light-rule;
-  line-height: $size-scale-xxl;
-  height: calc(#{$size-scale-xxl} + 1px);
-  margin-bottom: $size-scale-med;
-  overflow-y: scroll;
-  white-space: nowrap;
+    border-width: 0 0 1px 0;
+    border-style: solid;
+    border-color: $color-background-light-rule;
+    line-height: $size-scale-xxl;
+    height: calc(#{$size-scale-xxl} + 1px);
+    margin-bottom: $size-scale-med;
+    overflow-y: scroll;
+    white-space: nowrap;
+  }
 }</code>" data-collapsed=".ods-tablist { ... }"><code>.ods-tablist { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p><code>.ods-tablist</code> is a helper class to support the UI of a hyperlink using <code>role=&quot;tab&quot;</code></p><p>Place selector on outer <code>div</code> or <code>section</code> container with the <code>role=&quot;tablist&quot;</code> also applied.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import selector file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/tablist&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-input[type=text],
 input[type=password],
 input[type=email]"><h3 class="item__heading"><a class="item__name" href="#css-input[type=text],
@@ -1634,15 +1676,17 @@
 input[type=email] {
   @include deprecated(&#39;selectors for inputTypeText&#39;);
 
-  border-width: 0 0 1px 0;
-  border-color: $color-base-shark;
-  border-style: solid;
-  color: $color-type-theme-light-primary;
+  @if variable-exists(color-base-shark) {
+    border-width: 0 0 1px 0;
+    border-color: $color-base-shark;
+    border-style: solid;
+    color: $color-type-theme-light-primary;
 
-  &amp;:focus {
-    border-color: $color-accessibility-border-active;
-    outline: 0;
-    box-shadow: unset;
+    &amp;:focus {
+      border-color: $color-accessibility-border-active;
+      outline: 0;
+      box-shadow: unset;
+    }
   }
 }</code>" data-collapsed="input[type=text],
 input[type=password],
@@ -1656,32 +1700,44 @@
   &amp;.ods-roleTab {
     @include deprecated(&#39;selector .focus-visible&#39;);
 
-    @include focus-hyperlink(sass)
+    @if variable-exists(color-base-white) {
+      @include focus-hyperlink(sass)
+    }
   }
 }</code>" data-collapsed=".focus-visible { ... }"><code>.focus-visible { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p><code>.focus-visible</code> is a selector assigned to a DOM node as a user tabs through the UI.</p><p>See <a href="https://www.npmjs.com/package/focus-visible">npm focus-visible polyfill</a></p><p>See <a href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo">CSSWG spec</a></p><p>The role of this selector is to apply the designed <code>:focus-visible</code> style to DOM nodes that <strong>ARE NOT</strong> Auro Web Components</p><p>Supports the following selectors with <code>$scope</code> and/or <code>$prefix</code> defined:</p><ul><li>.hyperlink</li><li>.ods-roleButton / .wcs_roleButton</li><li>.ods-roleTab / .wcs_roleButton</li></ul></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/focusVisible&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_fontWeightBook"><h3 class="item__heading"><a class="item__name" href="#css-.util_fontWeightBook">.util_fontWeightBook</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_fontWeightDefault</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_fontWeightBook {
   @include deprecated(&#39;selector .util_fontWeightBook&#39;);
 
-  font-weight: $weight-book $important;
+  @if variable-exists(weight-book) {
+    font-weight: $weight-book $important;
+  }
 }</code>" data-collapsed=".util_fontWeightBook { ... }"><code>.util_fontWeightBook { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class for font-weight <code>book</code></p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import Sass file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_fontWeightLight"><h3 class="item__heading"><a class="item__name" href="#css-.util_fontWeightLight">.util_fontWeightLight</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_fontWeightDisplay</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_fontWeightLight {
   @include deprecated(&#39;selector .util_fontWeightLight&#39;);
 
-  font-weight: $weight-light $important;
+  @if variable-exists(weight-light) {
+    font-weight: $weight-light $important;
+  }
 }</code>" data-collapsed=".util_fontWeightLight { ... }"><code>.util_fontWeightLight { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class for font-weight <code>light</code></p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import Sass file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_type--lg"><h3 class="item__heading"><a class="item__name" href="#css-.util_type--lg">.util_type--lg</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>discontinue use, see heading styles</p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_type--lg {
   @include deprecated(&#39;selector .util_type--lg&#39;);
 
-  font-size: $size-font-breakpoint-desktop-lg $important;
+  @if variable-exists(size-font-breakpoint-desktop-lg) {
+    font-size: $size-font-breakpoint-desktop-lg $important;
+  }
 }</code>" data-collapsed=".util_type--lg { ... }"><code>.util_type--lg { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class for font-size <code>lg</code></p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import Sass file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_type--xl"><h3 class="item__heading"><a class="item__name" href="#css-.util_type--xl">.util_type--xl</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>discontinue use, see heading styles</p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_type--xl {
   @include deprecated(&#39;selector .util_type--xl&#39;);
 
-  @include breakpoint-medium {
-    font-size: $size-font-breakpoint-desktop-xl $important;
-  }
+  @if variable-exists(breakpoint-medium) {
+    @include breakpoint-medium {
+      font-size: $size-font-breakpoint-desktop-xl $important;
+    }
 
-  font-size: $size-font-breakpoint-mobile-xl $important;
+    font-size: $size-font-breakpoint-mobile-xl $important;
+  }
 }</code>" data-collapsed=".util_type--xl { ... }"><code>.util_type--xl { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class for font-size <code>xl</code></p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import Sass file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_type--secondary"><h3 class="item__heading"><a class="item__name" href="#css-.util_type--secondary">.util_type--secondary</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>discontinue use, see body styles</p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_type--secondary {
   @include deprecated(&#39;selector .util_type--secondary&#39;);
 
-  color: $color-type-theme-light-secondary $important;
+  @if variable-exists(color-type-theme-light-secondary) {
+    color: $color-type-theme-light-secondary $important;
+  }
 }</code>" data-collapsed=".util_type--secondary { ... }"><code>.util_type--secondary { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class for color <code>secondary</code></p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import Sass file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_marginAuto"><h3 class="item__heading"><a class="item__name" href="#css-.util_marginAuto">.util_marginAuto</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>util_margin--auto</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_marginAuto {
   @include deprecated(&#39;selctor .util_marginAuto&#39;);
 
@@ -1689,146 +1745,184 @@
 }</code>" data-collapsed=".util_marginAuto { ... }"><code>.util_marginAuto { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to center content within a block element</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_marginBottom--sml"><h3 class="item__heading"><a class="item__name" href="#css-.util_marginBottom--sml">.util_marginBottom--sml</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_stackMarginXs--bottom (auro_spacing)</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_marginBottom--sml {
   @include deprecated(&#39;selctor .util_marginBottom--sml&#39;);
 
-  margin-bottom: $size-scale-sml $important;
+  @if variable-exists(size-scale-sml) {
+    margin-bottom: $size-scale-sml $important;
+  }
 }</code>" data-collapsed=".util_marginBottom--sml { ... }"><code>.util_marginBottom--sml { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to set margin-bottom to <code>sml</code></p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_marginBottom--med"><h3 class="item__heading"><a class="item__name" href="#css-.util_marginBottom--med">.util_marginBottom--med</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_stackMarginMd--bottom (auro_spacing)</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_marginBottom--med {
   @include deprecated(&#39;selctor .util_marginBottom--med&#39;);
 
-  margin-bottom: $size-scale-med $important;
+  @if variable-exists(size-scale-med) {
+    margin-bottom: $size-scale-med $important;
+  }
 }</code>" data-collapsed=".util_marginBottom--med { ... }"><code>.util_marginBottom--med { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to set margin-bottom to <code>med</code></p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_marginTop--sml"><h3 class="item__heading"><a class="item__name" href="#css-.util_marginTop--sml">.util_marginTop--sml</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_stackMarginXs--top (auro_spacing)</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_marginTop--sml {
   @include deprecated(&#39;selctor .util_marginTop--sml&#39;);
 
-  margin-top: $size-scale-sml $important;
+  @if variable-exists(size-scale-sml) {
+    margin-top: $size-scale-sml $important;
+  }
 }</code>" data-collapsed=".util_marginTop--sml { ... }"><code>.util_marginTop--sml { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to set margin-top to <code>sml</code></p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_marginTop--med"><h3 class="item__heading"><a class="item__name" href="#css-.util_marginTop--med">.util_marginTop--med</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_stackMarginMd--top (auro_spacing)</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_marginTop--med {
   @include deprecated(&#39;selctor .util_marginTop--med&#39;);
 
-  margin-top: $size-scale-med $important;
+  @if variable-exists(size-scale-sml) {
+    margin-top: $size-scale-sml $important;
+  }
 }</code>" data-collapsed=".util_marginTop--med { ... }"><code>.util_marginTop--med { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to set margin-top to <code>med</code></p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_marginRight--sml"><h3 class="item__heading"><a class="item__name" href="#css-.util_marginRight--sml">.util_marginRight--sml</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_inlineMarginXs--right (auro_layoutPropertiesGenerator)</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_marginRight--sml {
   @include deprecated(&#39;selctor .util_marginRight--sml&#39;);
 
-  margin-right: $size-scale-sml $important;
+  @if variable-exists(size-scale-sml) {
+    margin-right: $size-scale-sml $important;
+  }
 }</code>" data-collapsed=".util_marginRight--sml { ... }"><code>.util_marginRight--sml { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to set margin-right to <code>sml</code></p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_marginRight--med"><h3 class="item__heading"><a class="item__name" href="#css-.util_marginRight--med">.util_marginRight--med</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_inlineMarginMd--right (auro_layoutPropertiesGenerator)</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_marginRight--med {
   @include deprecated(&#39;selctor .util_marginRight--med&#39;);
 
-  margin-right: $size-scale-med $important;
+  @if variable-exists(size-scale-med) {
+    margin-right: $size-scale-med $important;
+  }
 }</code>" data-collapsed=".util_marginRight--med { ... }"><code>.util_marginRight--med { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to set margin-right to <code>med</code></p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_marginLeft--sml"><h3 class="item__heading"><a class="item__name" href="#css-.util_marginLeft--sml">.util_marginLeft--sml</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_inlineMarginXs--left (auro_layoutPropertiesGenerator)</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_marginLeft--sml {
   @include deprecated(&#39;selctor .util_marginLeft--sml&#39;);
 
-  margin-left: $size-scale-sml $important;
+  @if variable-exists(size-scale-sml) {
+    margin-left: $size-scale-sml $important;
+  }
 }</code>" data-collapsed=".util_marginLeft--sml { ... }"><code>.util_marginLeft--sml { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to set margin-left to <code>sml</code></p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_marginLeft--med"><h3 class="item__heading"><a class="item__name" href="#css-.util_marginLeft--med">.util_marginLeft--med</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_inlineMarginMd--left (auro_layoutPropertiesGenerator)</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_marginLeft--med {
   @include deprecated(&#39;selctor .util_marginLeft--med&#39;);
 
-  margin-left: $size-scale-med $important;
+  @if variable-exists(size-scale-med) {
+    margin-left: $size-scale-med $important;
+  }
 }</code>" data-collapsed=".util_marginLeft--med { ... }"><code>.util_marginLeft--med { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to set margin-left to <code>med</code></p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_is-mobileOnly"><h3 class="item__heading"><a class="item__name" href="#css-.util_is-mobileOnly">.util_is-mobileOnly</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_is-smOnly</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_is-mobileOnly {
-  @include breakpoint-narrow {
-    @include deprecated(&#39;selector .util_is-mobileOnly&#39;);
+  @if variable-exists(breakpoint-width-narrow) {
+    @include breakpoint-narrow {
+      @include deprecated(&#39;selector .util_is-mobileOnly&#39;);
 
-    display: none $important;
+      display: none $important;
+    }
   }
 }</code>" data-collapsed=".util_is-mobileOnly { ... }"><code>.util_is-mobileOnly { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to restrain visibility of UI element to <strong>mobile</strong> users only.</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file and selector partial file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints&quot;;
 @import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_is-narrowOnly"><h3 class="item__heading"><a class="item__name" href="#css-.util_is-narrowOnly">.util_is-narrowOnly</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_is-mdOnly</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_is-narrowOnly {
   @include deprecated(&#39;selector .util_is-narrowOnly&#39;);
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-narrow) {
+    display: none $important;
 
-  @include breakpoint-narrow {
-    display: block $important;
-  }
+    @include breakpoint-narrow {
+      display: block $important;
+    }
 
-  @include breakpoint-medium {
-    display: none $important;
+    @include breakpoint-medium {
+      display: none $important;
+    }
   }
 }</code>" data-collapsed=".util_is-narrowOnly { ... }"><code>.util_is-narrowOnly { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to restrain <code>block</code> visibility of UI element between <strong>narrow</strong> and <strong>medium</strong> screens.</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file and selector partial file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints&quot;;
 @import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_is-narrowOnly--inline"><h3 class="item__heading"><a class="item__name" href="#css-.util_is-narrowOnly--inline">.util_is-narrowOnly--inline</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_is-mdOnly--inline</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_is-narrowOnly--inline {
   @include deprecated(&#39;selector .util_is-narrowOnly--inline&#39;);
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-narrow) {
+    display: none $important;
 
-  @include breakpoint-narrow {
-    display: inline-block $important;
-  }
+    @include breakpoint-narrow {
+      display: inline-block $important;
+    }
 
-  @include breakpoint-medium {
-    display: none $important;
+    @include breakpoint-medium {
+      display: none $important;
+    }
   }
 }</code>" data-collapsed=".util_is-narrowOnly--inline { ... }"><code>.util_is-narrowOnly--inline { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to restrain <code>inline-block</code> visibility of UI element between <strong>narrow</strong> and <strong>medium</strong> screens.</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file and selector partial file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints&quot;;
 @import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_is-narrowAppears"><h3 class="item__heading"><a class="item__name" href="#css-.util_is-narrowAppears">.util_is-narrowAppears</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_is-mdAppears</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_is-narrowAppears {
   @include deprecated(&#39;selector .util_is-narrowAppears&#39;);
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-narrow) {
+    display: none $important;
 
-  @include breakpoint-narrow {
-    display: block $important;
+    @include breakpoint-narrow {
+      display: block $important;
+    }
   }
 }</code>" data-collapsed=".util_is-narrowAppears { ... }"><code>.util_is-narrowAppears { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to restrain <code>block</code> visibility of UI element for <strong>narrow</strong> screens.</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file and selector partial file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints&quot;;
 @import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_is-narrowAppears--inline"><h3 class="item__heading"><a class="item__name" href="#css-.util_is-narrowAppears--inline">.util_is-narrowAppears--inline</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_is-mdAppears--inline</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_is-narrowAppears--inline {
   @include deprecated(&#39;selector .util_is-narrowAppears--inline&#39;);
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-narrow)  {
+    display: none $important;
 
-  @include breakpoint-narrow {
-    display: inline-block $important;
+    @include breakpoint-narrow {
+      display: inline-block $important;
+    }
   }
 }</code>" data-collapsed=".util_is-narrowAppears--inline { ... }"><code>.util_is-narrowAppears--inline { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to restrain <code>block</code> visibility of UI element for <strong>narrow</strong> screens.</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file and selector partial file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints&quot;;
 @import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_is-tabletOnly"><h3 class="item__heading"><a class="item__name" href="#css-.util_is-tabletOnly">.util_is-tabletOnly</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>no new selector</p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_is-tabletOnly {
   @include deprecated(&#39;selector .util_is-tabletOnly&#39;);
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-medium) {
+    display: none $important;
 
-  @include breakpoint-medium {
-    display: block $important;
-  }
+    @include breakpoint-medium {
+      display: block $important;
+    }
 
-  @include breakpoint-wide {
-    display: none $important;
+    @include breakpoint-wide {
+      display: none $important;
+    }
   }
 }</code>" data-collapsed=".util_is-tabletOnly { ... }"><code>.util_is-tabletOnly { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to restrain <code>block</code> visibility of UI element between <strong>medium</strong> and <strong>wide</strong> screens.</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file and selector partial file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints&quot;;
 @import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive&quot;;</code></pre></div><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.util_is-tabletOnly {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .util_is-tabletOnly {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_util_is-tabletOnly {}</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_is-tabletOnly--inline"><h3 class="item__heading"><a class="item__name" href="#css-.util_is-tabletOnly--inline">.util_is-tabletOnly--inline</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>no new selector</p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_is-tabletOnly--inline {
   @include deprecated(&#39;selector .util_is-tabletOnly--inline&#39;);
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-medium) {
+    display: none $important;
 
-  @include breakpoint-medium {
-    display: inline-block $important;
-  }
+    @include breakpoint-medium {
+      display: inline-block $important;
+    }
 
-  @include breakpoint-wide {
-    display: none $important;
+    @include breakpoint-wide {
+      display: none $important;
+    }
   }
 }</code>" data-collapsed=".util_is-tabletOnly--inline { ... }"><code>.util_is-tabletOnly--inline { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to restrain <code>inline-block</code> visibility of UI element between <strong>medium</strong> and <strong>wide</strong> screens.</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file and selector partial file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints&quot;;
 @import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive&quot;;</code></pre></div><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.util_is-tabletOnly--inline {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .util_is-tabletOnly--inline {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_util_is-tabletOnly--inline {}</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_is-tabletAppears"><h3 class="item__heading"><a class="item__name" href="#css-.util_is-tabletAppears">.util_is-tabletAppears</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>no new selector</p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_is-tabletAppears {
   @include deprecated(&#39;selector .util_is-tabletAppears&#39;);
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-medium) {
+    display: none $important;
 
-  @include breakpoint-medium {
-    display: block $important;
+    @include breakpoint-medium {
+      display: block $important;
+    }
   }
 }</code>" data-collapsed=".util_is-tabletAppears { ... }"><code>.util_is-tabletAppears { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to restrain <code>block</code> visibility of UI element for <strong>medium</strong> screens.</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file and selector partial file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints&quot;;
 @import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive&quot;;</code></pre></div><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.util_is-tabletAppears {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .util_is-tabletAppears {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_util_is-tabletAppears {}</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_is-tabletAppears--inline"><h3 class="item__heading"><a class="item__name" href="#css-.util_is-tabletAppears--inline">.util_is-tabletAppears--inline</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>no new selector</p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_is-tabletAppears--inline {
   @include deprecated(&#39;selector .util_is-tabletAppears--inline&#39;);
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-medium) {
+    display: none $important;
 
-  @include breakpoint-medium {
-    display: inline-block $important;
+    @include breakpoint-medium {
+      display: inline-block $important;
+    }
   }
 }</code>" data-collapsed=".util_is-tabletAppears--inline { ... }"><code>.util_is-tabletAppears--inline { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to restrain <code>inline-block</code> visibility of UI element for <strong>medium</strong> screens.</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file and selector partial file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints&quot;;
 @import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive&quot;;</code></pre></div><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.util_is-tabletAppears--inline {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .util_is-tabletAppears--inline {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_util_is-tabletAppears--inline {}</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_is-desktopOnly"><h3 class="item__heading"><a class="item__name" href="#css-.util_is-desktopOnly">.util_is-desktopOnly</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_is-lgOnly</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_is-desktopOnly {
   @include deprecated(&#39;selector .util_is-desktopOnly&#39;);
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-max) {
+    display: none $important;
 
-  @include breakpoint-max {
-    display: block $important;
+    @include breakpoint-max {
+      display: block $important;
+    }
   }
 }</code>" data-collapsed=".util_is-desktopOnly { ... }"><code>.util_is-desktopOnly { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to restrain <code>block</code> visibility of UI element for <strong>max</strong> screens.</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file and selector partial file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints&quot;;
 @import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive&quot;;</code></pre></div></section><section class="main__item container item item--deprecated" id="†deprecated-css-.util_is-desktopOnly--inline"><h3 class="item__heading"><a class="item__name" href="#css-.util_is-desktopOnly--inline">.util_is-desktopOnly--inline</a></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>see <code>.util_is-lgOnly--inline</code></p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>.util_is-desktopOnly--inline {
   @include deprecated(&#39;selector .util_is-desktopOnly--inline&#39;);
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-max) {
+    display: none $important;
 
-  @include breakpoint-max {
-    display: inline-block $important;
+    @include breakpoint-max {
+      display: inline-block $important;
+    }
   }
 }</code>" data-collapsed=".util_is-desktopOnly--inline { ... }"><code>.util_is-desktopOnly--inline { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to restrain <code>block</code> visibility of UI element for <strong>max</strong> screens.</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file and selector partial file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints&quot;;
 @import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive&quot;;</code></pre></div></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --> <span class="project-info__name">@alaskaairux/orion-web-core-style-sheets</span><!-- Version --> <span class="project-info__version">- v2.8.12</span><!-- License --> <span class="project-info__license">, under Apache-2.0</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>
\ No newline at end of file
diff --git a/src/_baseline.scss b/src/_baseline.scss
index 2ec58bc..f959df1 100644
--- a/src/_baseline.scss
+++ b/src/_baseline.scss
@@ -36,12 +36,14 @@ body,
 .baseType {
   @include deprecated('selctors body, .baseType');
 
-  margin: 0;
-  font-family: $auro-font-family-default;
-  font-weight: $weight-book;
-  font-size: $size-font-breakpoint-all-med;
-  line-height: $vertical-alignment-body;
-  color: $color-type-theme-light-primary;
+  @if variable-exists(font-family-base) {
+    margin: 0;
+    font-family: $font-family-base;
+    font-weight: $weight-book;
+    font-size: $size-font-breakpoint-all-med;
+    line-height: $vertical-alignment-body;
+    color: $color-type-theme-light-primary;
+  }
 }
 
 /// Sets standard `margin-bottom` for all paragraph style content
@@ -56,10 +58,12 @@ body,
 .baseParagraph {
   @include deprecated('selctor .baseParagraph');
 
-  margin-bottom: $size-margin-baseline;
+  @if variable-exists(size-margin-baseline) {
+    margin-bottom: $size-margin-baseline;
 
-  .hyperlink {
-    text-decoration: underline;
+    .hyperlink {
+      text-decoration: underline;
+    }
   }
 }
 
@@ -75,43 +79,45 @@ body,
 .hyperlink {
   @include deprecated('selctor .hyperlink');
 
-  color: $color-type-theme-light-link;
-  padding: 0 $size-scale-sml;
-  text-decoration: none;
-
-  &:visited {
+  @if variable-exists(color-type-theme-light-link) {
     color: $color-type-theme-light-link;
-  }
-
-  &--inline {
-    padding: 0;
-    text-decoration: underline;
+    padding: 0 $size-scale-sml;
+    text-decoration: none;
 
-    &:not(.is-touching) {
-      &:hover {
-        text-decoration: none !important;  // sass-lint:disable-line no-important
-      }
+    &:visited {
+      color: $color-type-theme-light-link;
     }
-  }
 
-  &--darktheme {
-    color: $color-type-theme-dark-link;
+    &--inline {
+      padding: 0;
+      text-decoration: underline;
 
-    &:not(.is-touching) {
-      &:hover {
-        color: $color-type-theme-dark-link-hover;
+      &:not(.is-touching) {
+        &:hover {
+          text-decoration: none !important;  // sass-lint:disable-line no-important
+        }
       }
     }
 
-    &:visited {
+    &--darktheme {
       color: $color-type-theme-dark-link;
+
+      &:not(.is-touching) {
+        &:hover {
+          color: $color-type-theme-dark-link-hover;
+        }
+      }
+
+      &:visited {
+        color: $color-type-theme-dark-link;
+      }
     }
-  }
 
-  &:not(.is-touching) {
-    &:hover {
-      color: $color-type-theme-light-link-hover;
-      text-decoration: underline;
+    &:not(.is-touching) {
+      &:hover {
+        color: $color-type-theme-light-link-hover;
+        text-decoration: underline;
+      }
     }
   }
 }
@@ -146,7 +152,9 @@ small,
 .type--small {
   @include deprecated('selctors small, .type--small');
 
-  font-size: $size-font-breakpoint-all-small;
+  @if variable-exists(color-type-theme-light-link) {
+    font-size: $size-font-breakpoint-all-small;
+  }
 }
 
 /// Baseline block Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. `<h1>`, `<h2>`, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.
@@ -161,9 +169,11 @@ small,
 .heading {
   @include deprecated('selctor .heading');
 
-  margin: $size-margin-header-y-axis $size-margin-header-x-axis;
-  font-weight: inherit;
-  line-height: $vertical-alignment-heading;
+  @if variable-exists(color-type-theme-light-link) {
+    margin: $size-margin-header-y-axis $size-margin-header-x-axis;
+    font-weight: inherit;
+    line-height: $vertical-alignment-heading;
+  }
 }
 
 /// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
@@ -179,11 +189,13 @@ small,
 .heading--max {
   @include deprecated('selctor .heading--max');
 
-  font-size: $size-font-breakpoint-mobile-max;
-  margin-top: 0;
+  @if variable-exists(color-type-theme-light-link) {
+    font-size: $size-font-breakpoint-mobile-max;
+    margin-top: 0;
 
-  @include breakpoint-medium {
-    font-size: $size-font-breakpoint-desktop-max;
+    @include breakpoint-medium {
+      font-size: $size-font-breakpoint-desktop-max;
+    }
   }
 }
 
@@ -199,10 +211,12 @@ small,
 .heading--xxl {
   @include deprecated('selctor .heading--xxl');
 
-  font-size: $size-font-breakpoint-mobile-xxl;
+  @if variable-exists(color-type-theme-light-link) {
+    font-size: $size-font-breakpoint-mobile-xxl;
 
-  @include breakpoint-medium {
-    font-size: $size-font-breakpoint-desktop-xxl;
+    @include breakpoint-medium {
+      font-size: $size-font-breakpoint-desktop-xxl;
+    }
   }
 }
 
@@ -218,10 +232,12 @@ small,
 .heading--xl {
   @include deprecated('selctor .heading--xl');
 
-  font-size: $size-font-breakpoint-mobile-xl;
+  @if variable-exists(color-type-theme-light-link) {
+    font-size: $size-font-breakpoint-mobile-xl;
 
-  @include breakpoint-medium {
-    font-size: $size-font-breakpoint-desktop-xl;
+    @include breakpoint-medium {
+      font-size: $size-font-breakpoint-desktop-xl;
+    }
   }
 }
 
@@ -237,10 +253,11 @@ small,
 .heading--lg {
   @include deprecated('selctor .heading--lg');
 
-  font-size: $size-font-breakpoint-mobile-lg;
+  @if variable-exists(color-type-theme-light-link) {
+    font-size: $size-font-breakpoint-mobile-lg;
 
-  @include breakpoint-medium {
-    font-size: $size-font-breakpoint-desktop-lg;
+    @include breakpoint-medium {
+      font-size: $size-font-breakpoint-desktop-lg;
+    }
   }
 }
-
diff --git a/src/_fonts.scss b/src/_fonts.scss
index a9a2ffc..fe5f61e 100644
--- a/src/_fonts.scss
+++ b/src/_fonts.scss
@@ -3,73 +3,63 @@
 
 // ---------------------------------------------------------------------
 
-@import "./libSupport/deprecated";
-
 // sass-lint:disable no-duplicate-properties
 
 // @font-face is not supported in SassDocs
-// See https://github.com/AlaskaAirlines/OrionWebCoreStyleSheets/blob/master/staticDocs/howToUseFonts.md for full details
 
 /// Baseline font-face setting for using web based custom fonts - font weight light
-/// @group †deprecated
 /// @example scss - import src file
 ///   @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts";
-@font-face {
-  @include deprecated('legacy @font-face setup');
 
-  @if variable-exists(asset-font-circular-family-name){
-    font-family: $asset-font-circular-family-name;
-  } @else {
-    font-family: $auro-font-family-default;
+// Auro rule
+@if variable-exists(auro-asset-font-circular-family-name) {
+  @font-face {
+    font-family: $auro-asset-font-circular-family-name;
+    src: url("https://resource.alaskaair.net/-/media/4E8D77C0D7A8411AB9C351C1EFF86681.woff2") format("woff2"),
+    url("https://resource.alaskaair.net/-/media/CAAEEC88586944808EDE9B36A3460098.woff") format("woff");
+    font-weight: $auro-text-heading-display-weight;
+    font-style: normal;
+    font-display: fallback;
   }
-  src: url("https://resource.alaskaair.net/-/media/4E8D77C0D7A8411AB9C351C1EFF86681.woff2") format("woff2"),
-  url("https://resource.alaskaair.net/-/media/CAAEEC88586944808EDE9B36A3460098.woff") format("woff");
-  @if variable-exists(weight-light){
+}
+
+// deprecated rule
+@if variable-exists(asset-font-circular-family-name) {
+  @font-face {
+    font-family: $asset-font-circular-family-name;
+    src: url("https://resource.alaskaair.net/-/media/4E8D77C0D7A8411AB9C351C1EFF86681.woff2") format("woff2"),
+    url("https://resource.alaskaair.net/-/media/CAAEEC88586944808EDE9B36A3460098.woff") format("woff");
     font-weight: $weight-light;
-  } @else {
-    font-family: $auro-text-heading-display-weight;
+    font-style: normal;
+    font-display: fallback;
   }
-  font-style: normal;
-  font-display: fallback;
 }
 
-/// Baseline font-face setting for using web based custom fonts - font weight light
-/// @group Baseline
-/// @example scss - import src file
-///   @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts";
-@font-face {
-  font-family: $auro-asset-font-circular-family-name;
-  src: url("https://resource.alaskaair.net/-/media/4E8D77C0D7A8411AB9C351C1EFF86681.woff2") format("woff2"),
-  url("https://resource.alaskaair.net/-/media/CAAEEC88586944808EDE9B36A3460098.woff") format("woff");
-  font-weight: $auro-text-heading-display-weight;
-  font-style: normal;
-  font-display: fallback;
-}
 
 /// Baseline font-face setting for using web based custom fonts - font weight medium
-/// @group Baseline
 /// @example scss - import src file
 ///   @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts";
 @font-face {
-  font-family: $auro-asset-font-circular-family-name;
-  src: url("https://resource.alaskaair.net/-/media/A5558137DB0F4B818D85EBE44FDC542E.woff2") format("woff2"),
-  url("https://resource.alaskaair.net/-/media/F4E82B6C6CBA46B4A322B4B99B2CBC63.woff") format("woff");
+  @if variable-exists(asset-font-circular-family-name){
+    font-family: $asset-font-circular-family-name;
+  } @else {
+    font-family: $auro-asset-font-circular-family-name;
+  }
+  src: url("https://resource.alaskaair.net/-/media/4E8D77C0D7A8411AB9C351C1EFF86681.woff2") format("woff2"),
+  url("https://resource.alaskaair.net/-/media/CAAEEC88586944808EDE9B36A3460098.woff") format("woff");
   font-weight: $auro-text-heading-medium-weight;
   font-style: normal;
   font-display: fallback;
 }
 
 /// Baseline font-face setting for using web based custom fonts - font weight book
-/// @group †deprecated
 /// @example scss - import src file
 ///   @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts";
 @font-face {
-  @include deprecated('legacy @font-face setup');
-
   @if variable-exists(asset-font-circular-family-name){
     font-family: $asset-font-circular-family-name;
   } @else {
-    font-family: $auro-font-family-default;
+    font-family: $auro-asset-font-circular-family-name;
   }
   src: url("https://resource.alaskaair.net/-/media/1DD02F55437F4346B7EF7D5A08326D71.woff2") format("woff2"),
   url("https://resource.alaskaair.net/-/media/2339807B68A344348447336D15035425.woff") format("woff");
@@ -81,16 +71,3 @@
   font-style: normal;
   font-display: fallback;
 }
-
-/// Baseline font-face setting for using web based custom fonts - font weight book
-/// @group Baseline
-/// @example scss - import src file
-///   @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts";
-@font-face {
-  font-family: $auro-asset-font-circular-family-name;
-  src: url("https://resource.alaskaair.net/-/media/1DD02F55437F4346B7EF7D5A08326D71.woff2") format("woff2"),
-  url("https://resource.alaskaair.net/-/media/2339807B68A344348447336D15035425.woff") format("woff");
-  font-weight: $auro-text-body-default-weight;
-  font-style: normal;
-  font-display: fallback;
-}
diff --git a/src/componentSupport/_anchor-roleButton.scss b/src/componentSupport/_anchor-roleButton.scss
index a9c833f..ca69a94 100644
--- a/src/componentSupport/_anchor-roleButton.scss
+++ b/src/componentSupport/_anchor-roleButton.scss
@@ -22,7 +22,9 @@
 .ods-roleButton {
   @include deprecated('selctor .ods-roleButton');
 
-  @include anchorButton(sass, noncomponent);
+  @if variable-exists(color-type-theme-light-link) {
+    @include anchorButton(sass, noncomponent);
+  }
 }
 
 
diff --git a/src/componentSupport/_anchor-roleTab.scss b/src/componentSupport/_anchor-roleTab.scss
index f367403..3ee72ce 100644
--- a/src/componentSupport/_anchor-roleTab.scss
+++ b/src/componentSupport/_anchor-roleTab.scss
@@ -21,8 +21,10 @@
 .ods-roleTab {
   @include deprecated('selctor .ods-roleTab');
 
-  @include anchorTab(sass, noncomponent);
-  margin-right: calc(#{$size-scale-micro} * -1);
+  @if variable-exists(color-type-theme-light-link) {
+    @include anchorTab(sass, noncomponent);
+    margin-right: calc(#{$size-scale-micro} * -1);
+  }
 }
 
 
diff --git a/src/componentSupport/_containedButtons.scss b/src/componentSupport/_containedButtons.scss
index f091a77..8d7dfb9 100644
--- a/src/componentSupport/_containedButtons.scss
+++ b/src/componentSupport/_containedButtons.scss
@@ -29,53 +29,55 @@
 .ods-containedButtons {
   @include deprecated('selctor .ods-containedButtons');
 
-  display: flex;
-  flex-direction: column;
+  @if variable-exists(breakpoint-width-medium) {
+    display: flex;
+    flex-direction: column;
 
-  > * {
-    margin-bottom: 1rem;
+    > * {
+      margin-bottom: 1rem;
 
-    &:last-child {
-      margin-bottom: 0;
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
-  }
 
-  ods-button {
-    order: -1;
-  }
+    ods-button {
+      order: -1;
+    }
 
-  [role=button] {
-    margin-bottom: 0;
-    width: 100%;
-    text-align: center;
-  }
+    [role=button] {
+      margin-bottom: 0;
+      width: 100%;
+      text-align: center;
+    }
 
-  &--reverse {
-    @include breakpoint-medium {
-      justify-content: flex-end;
+    &--reverse {
+      @include breakpoint-medium {
+        justify-content: flex-end;
+      }
     }
-  }
 
-  @include breakpoint-medium {
-    flex-direction: row;
+    @include breakpoint-medium {
+      flex-direction: row;
 
-    > * {
-      margin-left: 1rem;
-      margin-bottom: 0;
+      > * {
+        margin-left: 1rem;
+        margin-bottom: 0;
 
-      &:first-child {
-        margin-left: 0;
+        &:first-child {
+          margin-left: 0;
+        }
       }
-    }
 
-    ods-button {
-      order: inherit;
-    }
+      ods-button {
+        order: inherit;
+      }
 
-    [role=button] {
-      margin: inherit;
-      width: inherit;
-      text-align: inherit;
+      [role=button] {
+        margin: inherit;
+        width: inherit;
+        text-align: inherit;
+      }
     }
   }
 }
@@ -122,12 +124,12 @@
   }
 
   &--reverse {
-    @include breakpoint-medium {
+    @include auro_breakpoint--md {
       justify-content: flex-end;
     }
   }
 
-  @include breakpoint-medium {
+  @include auro_breakpoint--md {
     flex-direction: row;
 
     > * {
diff --git a/src/componentSupport/_tablist.scss b/src/componentSupport/_tablist.scss
index 7cdb7a8..db00b52 100644
--- a/src/componentSupport/_tablist.scss
+++ b/src/componentSupport/_tablist.scss
@@ -21,19 +21,21 @@
 .ods-tablist {
   @include deprecated('selctor .ods-tablist');
 
-  @include breakpoint-narrow {
-    overflow-y: unset;
-    white-space: unset;
-  }
+  @if variable-exists(breakpoint-width-narrow) {
+    @include breakpoint-narrow {
+      overflow-y: unset;
+      white-space: unset;
+    }
 
-  border-width: 0 0 1px 0;
-  border-style: solid;
-  border-color: $color-background-light-rule;
-  line-height: $size-scale-xxl;
-  height: calc(#{$size-scale-xxl} + 1px);
-  margin-bottom: $size-scale-med;
-  overflow-y: scroll;
-  white-space: nowrap;
+    border-width: 0 0 1px 0;
+    border-style: solid;
+    border-color: $color-background-light-rule;
+    line-height: $size-scale-xxl;
+    height: calc(#{$size-scale-xxl} + 1px);
+    margin-bottom: $size-scale-med;
+    overflow-y: scroll;
+    white-space: nowrap;
+  }
 }
 
 /// `.auro_tablist` is a helper class to support the UI of a hyperlink using `role="tab"`
@@ -46,7 +48,7 @@
 ///   @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/tablist";
 
 #{$scope}.auro_tablist {
-  @include breakpoint-narrow {
+  @include auro_breakpoint--sm {
     overflow-y: unset;
     white-space: unset;
   }
diff --git a/src/formElements/_inputTypeText.scss b/src/formElements/_inputTypeText.scss
index c92a37e..35e341c 100644
--- a/src/formElements/_inputTypeText.scss
+++ b/src/formElements/_inputTypeText.scss
@@ -16,14 +16,16 @@ input[type=password],
 input[type=email] {
   @include deprecated('selectors for inputTypeText');
 
-  border-width: 0 0 1px 0;
-  border-color: $color-base-shark;
-  border-style: solid;
-  color: $color-type-theme-light-primary;
+  @if variable-exists(color-base-shark) {
+    border-width: 0 0 1px 0;
+    border-color: $color-base-shark;
+    border-style: solid;
+    color: $color-type-theme-light-primary;
 
-  &:focus {
-    border-color: $color-accessibility-border-active;
-    outline: 0;
-    box-shadow: unset;
+    &:focus {
+      border-color: $color-accessibility-border-active;
+      outline: 0;
+      box-shadow: unset;
+    }
   }
 }
diff --git a/src/utilityClasses/_focusVisible.scss b/src/utilityClasses/_focusVisible.scss
index c6ee291..d76bbee 100644
--- a/src/utilityClasses/_focusVisible.scss
+++ b/src/utilityClasses/_focusVisible.scss
@@ -33,7 +33,9 @@
   &.ods-roleTab {
     @include deprecated('selector .focus-visible');
 
-    @include focus-hyperlink(sass)
+    @if variable-exists(color-base-white) {
+      @include focus-hyperlink(sass)
+    }
   }
 }
 
diff --git a/src/utilityClasses/_fontStyles.scss b/src/utilityClasses/_fontStyles.scss
index f88c663..8089d8c 100644
--- a/src/utilityClasses/_fontStyles.scss
+++ b/src/utilityClasses/_fontStyles.scss
@@ -18,7 +18,9 @@
 .util_fontWeightBook {
   @include deprecated('selector .util_fontWeightBook');
 
-  font-weight: $weight-book $important;
+  @if variable-exists(weight-book) {
+    font-weight: $weight-book $important;
+  }
 }
 
 /// Utility class for default font-weight
@@ -75,7 +77,9 @@
 .util_fontWeightLight {
   @include deprecated('selector .util_fontWeightLight');
 
-  font-weight: $weight-light $important;
+  @if variable-exists(weight-light) {
+    font-weight: $weight-light $important;
+  }
 }
 
 /// Utility class for display font-weight
@@ -177,7 +181,9 @@
 .util_type--lg {
   @include deprecated('selector .util_type--lg');
 
-  font-size: $size-font-breakpoint-desktop-lg $important;
+  @if variable-exists(size-font-breakpoint-desktop-lg) {
+    font-size: $size-font-breakpoint-desktop-lg $important;
+  }
 }
 
 /// Utility class for font-size `xl`
@@ -192,11 +198,13 @@
 .util_type--xl {
   @include deprecated('selector .util_type--xl');
 
-  @include breakpoint-medium {
-    font-size: $size-font-breakpoint-desktop-xl $important;
-  }
+  @if variable-exists(breakpoint-medium) {
+    @include breakpoint-medium {
+      font-size: $size-font-breakpoint-desktop-xl $important;
+    }
 
-  font-size: $size-font-breakpoint-mobile-xl $important;
+    font-size: $size-font-breakpoint-mobile-xl $important;
+  }
 }
 
 /// Utility class for color `secondary`
@@ -211,5 +219,7 @@
 .util_type--secondary {
   @include deprecated('selector .util_type--secondary');
 
-  color: $color-type-theme-light-secondary $important;
+  @if variable-exists(color-type-theme-light-secondary) {
+    color: $color-type-theme-light-secondary $important;
+  }
 }
diff --git a/src/utilityClasses/_layoutProperties.scss b/src/utilityClasses/_layoutProperties.scss
index 777ea02..e1a7468 100644
--- a/src/utilityClasses/_layoutProperties.scss
+++ b/src/utilityClasses/_layoutProperties.scss
@@ -99,7 +99,9 @@
 .util_marginBottom--sml {
   @include deprecated('selctor .util_marginBottom--sml');
 
-  margin-bottom: $size-scale-sml $important;
+  @if variable-exists(size-scale-sml) {
+    margin-bottom: $size-scale-sml $important;
+  }
 }
 
 /// Utility class to set margin-bottom to `med`
@@ -113,7 +115,9 @@
 .util_marginBottom--med {
   @include deprecated('selctor .util_marginBottom--med');
 
-  margin-bottom: $size-scale-med $important;
+  @if variable-exists(size-scale-med) {
+    margin-bottom: $size-scale-med $important;
+  }
 }
 
 /// Utility class to set margin-top to `sml`
@@ -127,7 +131,9 @@
 .util_marginTop--sml {
   @include deprecated('selctor .util_marginTop--sml');
 
-  margin-top: $size-scale-sml $important;
+  @if variable-exists(size-scale-sml) {
+    margin-top: $size-scale-sml $important;
+  }
 }
 
 /// Utility class to set margin-top to `med`
@@ -141,7 +147,9 @@
 .util_marginTop--med {
   @include deprecated('selctor .util_marginTop--med');
 
-  margin-top: $size-scale-med $important;
+  @if variable-exists(size-scale-sml) {
+    margin-top: $size-scale-sml $important;
+  }
 }
 
 /// Utility class to set margin-right to `sml`
@@ -155,7 +163,9 @@
 .util_marginRight--sml {
   @include deprecated('selctor .util_marginRight--sml');
 
-  margin-right: $size-scale-sml $important;
+  @if variable-exists(size-scale-sml) {
+    margin-right: $size-scale-sml $important;
+  }
 }
 
 /// Utility class to set margin-right to `med`
@@ -169,7 +179,9 @@
 .util_marginRight--med {
   @include deprecated('selctor .util_marginRight--med');
 
-  margin-right: $size-scale-med $important;
+  @if variable-exists(size-scale-med) {
+    margin-right: $size-scale-med $important;
+  }
 }
 
 /// Utility class to set margin-left to `sml`
@@ -183,7 +195,9 @@
 .util_marginLeft--sml {
   @include deprecated('selctor .util_marginLeft--sml');
 
-  margin-left: $size-scale-sml $important;
+  @if variable-exists(size-scale-sml) {
+    margin-left: $size-scale-sml $important;
+  }
 }
 
 /// Utility class to set margin-left to `med`
@@ -197,5 +211,7 @@
 .util_marginLeft--med {
   @include deprecated('selctor .util_marginLeft--med');
 
-  margin-left: $size-scale-med $important;
+  @if variable-exists(size-scale-med) {
+    margin-left: $size-scale-med $important;
+  }
 }
diff --git a/src/utilityClasses/_responsive.scss b/src/utilityClasses/_responsive.scss
index b692f36..b7cc589 100644
--- a/src/utilityClasses/_responsive.scss
+++ b/src/utilityClasses/_responsive.scss
@@ -19,10 +19,12 @@
 ///   @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
 ///   @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";
 .util_is-mobileOnly {
-  @include breakpoint-narrow {
-    @include deprecated('selector .util_is-mobileOnly');
+  @if variable-exists(breakpoint-width-narrow) {
+    @include breakpoint-narrow {
+      @include deprecated('selector .util_is-mobileOnly');
 
-    display: none $important;
+      display: none $important;
+    }
   }
 }
 
@@ -62,14 +64,16 @@
 .util_is-narrowOnly {
   @include deprecated('selector .util_is-narrowOnly');
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-narrow) {
+    display: none $important;
 
-  @include breakpoint-narrow {
-    display: block $important;
-  }
+    @include breakpoint-narrow {
+      display: block $important;
+    }
 
-  @include breakpoint-medium {
-    display: none $important;
+    @include breakpoint-medium {
+      display: none $important;
+    }
   }
 }
 
@@ -115,14 +119,16 @@
 .util_is-narrowOnly--inline {
   @include deprecated('selector .util_is-narrowOnly--inline');
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-narrow) {
+    display: none $important;
 
-  @include breakpoint-narrow {
-    display: inline-block $important;
-  }
+    @include breakpoint-narrow {
+      display: inline-block $important;
+    }
 
-  @include breakpoint-medium {
-    display: none $important;
+    @include breakpoint-medium {
+      display: none $important;
+    }
   }
 }
 
@@ -168,10 +174,12 @@
 .util_is-narrowAppears {
   @include deprecated('selector .util_is-narrowAppears');
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-narrow) {
+    display: none $important;
 
-  @include breakpoint-narrow {
-    display: block $important;
+    @include breakpoint-narrow {
+      display: block $important;
+    }
   }
 }
 
@@ -213,10 +221,12 @@
 .util_is-narrowAppears--inline {
   @include deprecated('selector .util_is-narrowAppears--inline');
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-narrow)  {
+    display: none $important;
 
-  @include breakpoint-narrow {
-    display: inline-block $important;
+    @include breakpoint-narrow {
+      display: inline-block $important;
+    }
   }
 }
 
@@ -270,14 +280,16 @@
 .util_is-tabletOnly {
   @include deprecated('selector .util_is-tabletOnly');
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-medium) {
+    display: none $important;
 
-  @include breakpoint-medium {
-    display: block $important;
-  }
+    @include breakpoint-medium {
+      display: block $important;
+    }
 
-  @include breakpoint-wide {
-    display: none $important;
+    @include breakpoint-wide {
+      display: none $important;
+    }
   }
 }
 
@@ -304,14 +316,16 @@
 .util_is-tabletOnly--inline {
   @include deprecated('selector .util_is-tabletOnly--inline');
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-medium) {
+    display: none $important;
 
-  @include breakpoint-medium {
-    display: inline-block $important;
-  }
+    @include breakpoint-medium {
+      display: inline-block $important;
+    }
 
-  @include breakpoint-wide {
-    display: none $important;
+    @include breakpoint-wide {
+      display: none $important;
+    }
   }
 }
 
@@ -338,10 +352,12 @@
 .util_is-tabletAppears {
   @include deprecated('selector .util_is-tabletAppears');
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-medium) {
+    display: none $important;
 
-  @include breakpoint-medium {
-    display: block $important;
+    @include breakpoint-medium {
+      display: block $important;
+    }
   }
 }
 
@@ -368,10 +384,12 @@
 .util_is-tabletAppears--inline {
   @include deprecated('selector .util_is-tabletAppears--inline');
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-medium) {
+    display: none $important;
 
-  @include breakpoint-medium {
-    display: inline-block $important;
+    @include breakpoint-medium {
+      display: inline-block $important;
+    }
   }
 }
 
@@ -386,10 +404,12 @@
 .util_is-desktopOnly {
   @include deprecated('selector .util_is-desktopOnly');
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-max) {
+    display: none $important;
 
-  @include breakpoint-max {
-    display: block $important;
+    @include breakpoint-max {
+      display: block $important;
+    }
   }
 }
 
@@ -431,10 +451,12 @@
 .util_is-desktopOnly--inline {
   @include deprecated('selector .util_is-desktopOnly--inline');
 
-  display: none $important;
+  @if variable-exists(breakpoint-width-max) {
+    display: none $important;
 
-  @include breakpoint-max {
-    display: inline-block $important;
+    @include breakpoint-max {
+      display: inline-block $important;
+    }
   }
 }
 
diff --git a/staticDocs/howToUseFonts.md b/staticDocs/howToUseFonts.md
deleted file mode 100644
index b28f1e8..0000000
--- a/staticDocs/howToUseFonts.md
+++ /dev/null
@@ -1,95 +0,0 @@
-# How to use Orion Web Fonts
-
-All Orion's web fonts are to be used directly from this npm package, not manually copied to the individual project. Copying files directly to an individual project would violate use compliance and the maintainers of this resource will not be responsible for any issues that may arise.
-
-When using these web fonts, be sure to add this Sass reference of the `@font-face` rules to your `global.scss` file.
-
-```sass
-@import "@alaskaairux/orion-web-core-style-sheets/dist/fonts";
-```
-
-## Include in Webpack pipeline
-
-Webpack offers a few different solutions to make using web fonts easy.
-
-**NOTE:** Again, please **DO NOT** manually copy these files to your local project and add to version control. It is important that these font files are referenced from the npm package for proper versioning and distribution.
-
-### This all depends ...
-
-When using this npm resource, the need to copy the `fonts/` dir to your local `./src` directory all depends on your personal setup. In many cases, the copying of font files to the local `./src` directory will make things easer. In other configurations, (namely the current release of create-react-app), the React setup will be able to read resources directly from the npm and not require these resources to be in the local `./src` dir.
-
-#### Fonts from CDN
-
-The issues with font copying and location resource location will be resolved once all the fonts are located in a CDN. Work that is slotted in the near future.
-
-#### The fonts location Token
-
-In the fonts Sass file, there is a variable reference defined by this [Design Token](https://github.com/AlaskaAirlines/OrionDesignTokens/blob/master/src/asset/font.json#L6). If at any time you need to over-ride this location Token, usign something like the following will allow you to do so:
-
-```scss
-$asset-font-circular-dir: 'fonts/';
-@import "~@alaskaairux/orion-web-core-style-sheets/dist/fonts";
-```
-
-Doing this, the Token value of `../fonts/` will be updated to `fonts/` prior to the loading of the `fonts.scss` file.
-
-### With full access to Webpack
-
-If using the `public` directory as a dev/build resource of assets, it is suggested that you use the `copy-webpack-plugin` plugin.
-
-To install:
-
-```
-$ npm i -D copy-webpack-plugin
-```
-
-In `webpack.config.js` file add the following dependency:
-
-```
-const copyWebpackPlugin = require("copy-webpack-plugin");
-```
-
-Within the plugins section of the webpack.config.js file, add the following reference:
-
-```
-plugins: [
-  // This plugin will copy resources from the npm package and use them within
-  // the accessible asset directories in the app
-  new copyWebpackPlugin([
-    {
-      from: "./node_modules/@alaskaair/orion-web-core-style-sheets/fonts",
-      to: "./src/fonts",
-      toType: "dir"
-    }
-  ]),
-],
-```
-
-### Without direct to Webpack
-
-If the project is using a `build.js` process and have not ejected your Webpack configurations, please add the following to the project's `package.json` file:
-
-```js
-$ npm i copyfiles -D
-```
-
-```
-"scripts": {
-  "copyfiles": "copyfiles -f ./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts/*.* ./src/fonts"
-}
-```
-
-## CSS/Sass support
-
-Using Orion Design System fonts has a dependency on [Orion Design Tokens](https://www.npmjs.com/package/@alaskaairux/orion-design-tokens) and [Sass](https://sass-lang.com). Please see the [instal](https://github.com/AlaskaAirlines/OrionDesignTokens#install) instructions for any questions regarding Orion Design Tokens.
-
-To install supporting Sass into your project add the following lines to the project's main Sass stylesheet:
-
-```scss
-@import "~@alaskaairux/orion-icons/dist/fonts";
-@import "~@alaskaairux/orion-icons/dist/baseline";
-```
-
-## Need more help?
-
-If you require additional development assistance in order to consume these fonts, please reach out to the `E-comm XD&R` Teams team.