npm - @baloise/ds-styles - Versions diffs - 0.0.5-nightly.e56f740 - Mend

@baloise/ds-styles 0.0.5-nightly.e56f740

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/LICENSE +201 -0
package/README.md +45 -0
package/bin/index.mjs +1333 -0
package/css/all.css +18468 -0
package/css/all.css.map +1 -0
package/css/all.min.css +1 -0
package/css/baloise-design-system.css +18468 -0
package/css/baloise-design-system.css.map +1 -0
package/css/baloise-design-system.min.css +1 -0
package/css/core.css +4423 -0
package/css/core.css.map +1 -0
package/css/core.min.css +1 -0
package/css/font.css +29 -0
package/css/font.css.map +1 -0
package/css/font.min.css +1 -0
package/css/mixins.css +2 -0
package/css/mixins.css.map +1 -0
package/css/mixins.min.css +0 -0
package/css/normalize.css +351 -0
package/css/normalize.css.map +1 -0
package/css/normalize.min.css +1 -0
package/css/structure.css +147 -0
package/css/structure.css.map +1 -0
package/css/structure.min.css +1 -0
package/css/themes/compact.css +30 -0
package/css/themes/compact.css.map +1 -0
package/css/themes/compact.min.css +1 -0
package/css/utilities/all.css +13112 -0
package/css/utilities/all.css.map +1 -0
package/css/utilities/all.min.css +1 -0
package/css/utilities/background.css +1460 -0
package/css/utilities/background.css.map +1 -0
package/css/utilities/background.min.css +1 -0
package/css/utilities/border.css +4697 -0
package/css/utilities/border.css.map +1 -0
package/css/utilities/border.min.css +1 -0
package/css/utilities/elevation.css +317 -0
package/css/utilities/elevation.css.map +1 -0
package/css/utilities/elevation.min.css +1 -0
package/css/utilities/flex.css +969 -0
package/css/utilities/flex.css.map +1 -0
package/css/utilities/flex.min.css +1 -0
package/css/utilities/grid.css +1209 -0
package/css/utilities/grid.css.map +1 -0
package/css/utilities/grid.min.css +1 -0
package/css/utilities/interaction.css +44 -0
package/css/utilities/interaction.css.map +1 -0
package/css/utilities/interaction.min.css +1 -0
package/css/utilities/layout.css +1055 -0
package/css/utilities/layout.css.map +1 -0
package/css/utilities/layout.min.css +1 -0
package/css/utilities/sizing.css +1931 -0
package/css/utilities/sizing.css.map +1 -0
package/css/utilities/sizing.min.css +1 -0
package/css/utilities/spacing.css +1881 -0
package/css/utilities/spacing.css.map +1 -0
package/css/utilities/spacing.min.css +1 -0
package/css/utilities/typography.css +763 -0
package/css/utilities/typography.css.map +1 -0
package/css/utilities/typography.min.css +1 -0
package/package.json +36 -0
package/sass/all.sass +6 -0
package/sass/baloise-design-system.sass +1 -0
package/sass/core.sass +37 -0
package/sass/font.sass +1 -0
package/sass/mixins.sass +3 -0
package/sass/normalize.sass +359 -0
package/sass/structure.sass +113 -0
package/sass/themes/compact.sass +28 -0
package/sass/utilities/all.sass +9 -0
package/sass/utilities/background.sass +5 -0
package/sass/utilities/border.sass +2 -0
package/sass/utilities/elevation.sass +2 -0
package/sass/utilities/flex.sass +2 -0
package/sass/utilities/grid.sass +2 -0
package/sass/utilities/interaction.sass +2 -0
package/sass/utilities/layout.sass +12 -0
package/sass/utilities/sizing.sass +2 -0
package/sass/utilities/spacing.sass +2 -0
package/sass/utilities/typography.sass +127 -0
package/src/core/_all.sass +18 -0
package/src/core/container.sass +23 -0
package/src/core/form/_all.sass +6 -0
package/src/core/form/button.sass +532 -0
package/src/core/form/file.sass +139 -0
package/src/core/form/input-textarea.sass +80 -0
package/src/core/form/select.sass +111 -0
package/src/core/form/shared.sass +69 -0
package/src/core/form/tools.sass +209 -0
package/src/core/grid.sass +477 -0
package/src/core/link.sass +64 -0
package/src/core/list.sass +85 -0
package/src/core/table.sass +134 -0
package/src/core/typography.sass +33 -0
package/src/core/vars/_all.sass +7 -0
package/src/core/vars/button.vars.sass +282 -0
package/src/core/vars/form.vars.sass +137 -0
package/src/core/vars/link.vars.sass +36 -0
package/src/core/vars/list.vars.sass +20 -0
package/src/core/vars/structure.vars.sass +47 -0
package/src/core/vars/table.vars.sass +55 -0
package/src/core/vars/typography.vars.sass +12 -0
package/src/generated/background.sass +1091 -0
package/src/generated/border.sass +3943 -0
package/src/generated/elevation.sass +283 -0
package/src/generated/flex.sass +831 -0
package/src/generated/interaction.sass +26 -0
package/src/generated/layout.sass +948 -0
package/src/generated/sizing.sass +1703 -0
package/src/generated/spacing.sass +1683 -0
package/src/generated/typography.sass +453 -0
package/src/mixins/_all.sass +7 -0
package/src/mixins/bem.mixin.sass +39 -0
package/src/mixins/breakpoint.mixin.sass +67 -0
package/src/mixins/extends.sass +32 -0
package/src/mixins/general.mixin.sass +95 -0
package/src/mixins/svg.mixin.sass +6 -0

package/src/generated/spacing.sass ADDED Viewed

@@ -0,0 +1,1683 @@
+.m-none
+  margin: 0 !important
+.m-auto
+  margin: auto !important
+.m-xx-small
+  margin: var(--bal-space-xx-small) !important
+.m-x-small
+  margin: var(--bal-space-x-small) !important
+.m-small
+  margin: var(--bal-space-small) !important
+.m-normal
+  margin: var(--bal-space-normal) !important
+.m-medium
+  margin: var(--bal-space-medium) !important
+.m-large
+  margin: var(--bal-space-large) !important
+.m-x-large
+  margin: var(--bal-space-x-large) !important
+.m-xx-large
+  margin: var(--bal-space-xx-large) !important
+.m-xxx-large
+  margin: var(--bal-space-xxx-large) !important
+.m-xxxx-large
+  margin: var(--bal-space-xxxx-large) !important
++tablet
+  .m-none
+    margin: 0 !important
+  .m-auto
+    margin: auto !important
+  .m-xx-small
+    margin: var(--bal-space-xx-small-tablet) !important
+  .m-x-small
+    margin: var(--bal-space-x-small-tablet) !important
+  .m-small
+    margin: var(--bal-space-small-tablet) !important
+  .m-normal
+    margin: var(--bal-space-normal-tablet) !important
+  .m-medium
+    margin: var(--bal-space-medium-tablet) !important
+  .m-large
+    margin: var(--bal-space-large-tablet) !important
+  .m-x-large
+    margin: var(--bal-space-x-large-tablet) !important
+  .m-xx-large
+    margin: var(--bal-space-xx-large-tablet) !important
+  .m-xxx-large
+    margin: var(--bal-space-xxx-large-tablet) !important
+  .m-xxxx-large
+    margin: var(--bal-space-xxxx-large-tablet) !important
++desktop
+  .m-none
+    margin: 0 !important
+  .m-auto
+    margin: auto !important
+  .m-xx-small
+    margin: var(--bal-space-xx-small-desktop) !important
+  .m-x-small
+    margin: var(--bal-space-x-small-desktop) !important
+  .m-small
+    margin: var(--bal-space-small-desktop) !important
+  .m-normal
+    margin: var(--bal-space-normal-desktop) !important
+  .m-medium
+    margin: var(--bal-space-medium-desktop) !important
+  .m-large
+    margin: var(--bal-space-large-desktop) !important
+  .m-x-large
+    margin: var(--bal-space-x-large-desktop) !important
+  .m-xx-large
+    margin: var(--bal-space-xx-large-desktop) !important
+  .m-xxx-large
+    margin: var(--bal-space-xxx-large-desktop) !important
+  .m-xxxx-large
+    margin: var(--bal-space-xxxx-large-desktop) !important
+.mx-none
+  margin-left: 0 !important
+  margin-right: 0 !important
+.mx-auto
+  margin-left: auto !important
+  margin-right: auto !important
+.mx-xx-small
+  margin-left: var(--bal-space-xx-small) !important
+  margin-right: var(--bal-space-xx-small) !important
+.mx-x-small
+  margin-left: var(--bal-space-x-small) !important
+  margin-right: var(--bal-space-x-small) !important
+.mx-small
+  margin-left: var(--bal-space-small) !important
+  margin-right: var(--bal-space-small) !important
+.mx-normal
+  margin-left: var(--bal-space-normal) !important
+  margin-right: var(--bal-space-normal) !important
+.mx-medium
+  margin-left: var(--bal-space-medium) !important
+  margin-right: var(--bal-space-medium) !important
+.mx-large
+  margin-left: var(--bal-space-large) !important
+  margin-right: var(--bal-space-large) !important
+.mx-x-large
+  margin-left: var(--bal-space-x-large) !important
+  margin-right: var(--bal-space-x-large) !important
+.mx-xx-large
+  margin-left: var(--bal-space-xx-large) !important
+  margin-right: var(--bal-space-xx-large) !important
+.mx-xxx-large
+  margin-left: var(--bal-space-xxx-large) !important
+  margin-right: var(--bal-space-xxx-large) !important
+.mx-xxxx-large
+  margin-left: var(--bal-space-xxxx-large) !important
+  margin-right: var(--bal-space-xxxx-large) !important
++tablet
+  .mx-none
+    margin-left: 0 !important
+    margin-right: 0 !important
+  .mx-auto
+    margin-left: auto !important
+    margin-right: auto !important
+  .mx-xx-small
+    margin-left: var(--bal-space-xx-small-tablet) !important
+    margin-right: var(--bal-space-xx-small-tablet) !important
+  .mx-x-small
+    margin-left: var(--bal-space-x-small-tablet) !important
+    margin-right: var(--bal-space-x-small-tablet) !important
+  .mx-small
+    margin-left: var(--bal-space-small-tablet) !important
+    margin-right: var(--bal-space-small-tablet) !important
+  .mx-normal
+    margin-left: var(--bal-space-normal-tablet) !important
+    margin-right: var(--bal-space-normal-tablet) !important
+  .mx-medium
+    margin-left: var(--bal-space-medium-tablet) !important
+    margin-right: var(--bal-space-medium-tablet) !important
+  .mx-large
+    margin-left: var(--bal-space-large-tablet) !important
+    margin-right: var(--bal-space-large-tablet) !important
+  .mx-x-large
+    margin-left: var(--bal-space-x-large-tablet) !important
+    margin-right: var(--bal-space-x-large-tablet) !important
+  .mx-xx-large
+    margin-left: var(--bal-space-xx-large-tablet) !important
+    margin-right: var(--bal-space-xx-large-tablet) !important
+  .mx-xxx-large
+    margin-left: var(--bal-space-xxx-large-tablet) !important
+    margin-right: var(--bal-space-xxx-large-tablet) !important
+  .mx-xxxx-large
+    margin-left: var(--bal-space-xxxx-large-tablet) !important
+    margin-right: var(--bal-space-xxxx-large-tablet) !important
++desktop
+  .mx-none
+    margin-left: 0 !important
+    margin-right: 0 !important
+  .mx-auto
+    margin-left: auto !important
+    margin-right: auto !important
+  .mx-xx-small
+    margin-left: var(--bal-space-xx-small-desktop) !important
+    margin-right: var(--bal-space-xx-small-desktop) !important
+  .mx-x-small
+    margin-left: var(--bal-space-x-small-desktop) !important
+    margin-right: var(--bal-space-x-small-desktop) !important
+  .mx-small
+    margin-left: var(--bal-space-small-desktop) !important
+    margin-right: var(--bal-space-small-desktop) !important
+  .mx-normal
+    margin-left: var(--bal-space-normal-desktop) !important
+    margin-right: var(--bal-space-normal-desktop) !important
+  .mx-medium
+    margin-left: var(--bal-space-medium-desktop) !important
+    margin-right: var(--bal-space-medium-desktop) !important
+  .mx-large
+    margin-left: var(--bal-space-large-desktop) !important
+    margin-right: var(--bal-space-large-desktop) !important
+  .mx-x-large
+    margin-left: var(--bal-space-x-large-desktop) !important
+    margin-right: var(--bal-space-x-large-desktop) !important
+  .mx-xx-large
+    margin-left: var(--bal-space-xx-large-desktop) !important
+    margin-right: var(--bal-space-xx-large-desktop) !important
+  .mx-xxx-large
+    margin-left: var(--bal-space-xxx-large-desktop) !important
+    margin-right: var(--bal-space-xxx-large-desktop) !important
+  .mx-xxxx-large
+    margin-left: var(--bal-space-xxxx-large-desktop) !important
+    margin-right: var(--bal-space-xxxx-large-desktop) !important
+.my-none
+  margin-top: 0 !important
+  margin-bottom: 0 !important
+.my-auto
+  margin-top: auto !important
+  margin-bottom: auto !important
+.my-xx-small
+  margin-top: var(--bal-space-xx-small) !important
+  margin-bottom: var(--bal-space-xx-small) !important
+.my-x-small
+  margin-top: var(--bal-space-x-small) !important
+  margin-bottom: var(--bal-space-x-small) !important
+.my-small
+  margin-top: var(--bal-space-small) !important
+  margin-bottom: var(--bal-space-small) !important
+.my-normal
+  margin-top: var(--bal-space-normal) !important
+  margin-bottom: var(--bal-space-normal) !important
+.my-medium
+  margin-top: var(--bal-space-medium) !important
+  margin-bottom: var(--bal-space-medium) !important
+.my-large
+  margin-top: var(--bal-space-large) !important
+  margin-bottom: var(--bal-space-large) !important
+.my-x-large
+  margin-top: var(--bal-space-x-large) !important
+  margin-bottom: var(--bal-space-x-large) !important
+.my-xx-large
+  margin-top: var(--bal-space-xx-large) !important
+  margin-bottom: var(--bal-space-xx-large) !important
+.my-xxx-large
+  margin-top: var(--bal-space-xxx-large) !important
+  margin-bottom: var(--bal-space-xxx-large) !important
+.my-xxxx-large
+  margin-top: var(--bal-space-xxxx-large) !important
+  margin-bottom: var(--bal-space-xxxx-large) !important
++tablet
+  .my-none
+    margin-top: 0 !important
+    margin-bottom: 0 !important
+  .my-auto
+    margin-top: auto !important
+    margin-bottom: auto !important
+  .my-xx-small
+    margin-top: var(--bal-space-xx-small-tablet) !important
+    margin-bottom: var(--bal-space-xx-small-tablet) !important
+  .my-x-small
+    margin-top: var(--bal-space-x-small-tablet) !important
+    margin-bottom: var(--bal-space-x-small-tablet) !important
+  .my-small
+    margin-top: var(--bal-space-small-tablet) !important
+    margin-bottom: var(--bal-space-small-tablet) !important
+  .my-normal
+    margin-top: var(--bal-space-normal-tablet) !important
+    margin-bottom: var(--bal-space-normal-tablet) !important
+  .my-medium
+    margin-top: var(--bal-space-medium-tablet) !important
+    margin-bottom: var(--bal-space-medium-tablet) !important
+  .my-large
+    margin-top: var(--bal-space-large-tablet) !important
+    margin-bottom: var(--bal-space-large-tablet) !important
+  .my-x-large
+    margin-top: var(--bal-space-x-large-tablet) !important
+    margin-bottom: var(--bal-space-x-large-tablet) !important
+  .my-xx-large
+    margin-top: var(--bal-space-xx-large-tablet) !important
+    margin-bottom: var(--bal-space-xx-large-tablet) !important
+  .my-xxx-large
+    margin-top: var(--bal-space-xxx-large-tablet) !important
+    margin-bottom: var(--bal-space-xxx-large-tablet) !important
+  .my-xxxx-large
+    margin-top: var(--bal-space-xxxx-large-tablet) !important
+    margin-bottom: var(--bal-space-xxxx-large-tablet) !important
++desktop
+  .my-none
+    margin-top: 0 !important
+    margin-bottom: 0 !important
+  .my-auto
+    margin-top: auto !important
+    margin-bottom: auto !important
+  .my-xx-small
+    margin-top: var(--bal-space-xx-small-desktop) !important
+    margin-bottom: var(--bal-space-xx-small-desktop) !important
+  .my-x-small
+    margin-top: var(--bal-space-x-small-desktop) !important
+    margin-bottom: var(--bal-space-x-small-desktop) !important
+  .my-small
+    margin-top: var(--bal-space-small-desktop) !important
+    margin-bottom: var(--bal-space-small-desktop) !important
+  .my-normal
+    margin-top: var(--bal-space-normal-desktop) !important
+    margin-bottom: var(--bal-space-normal-desktop) !important
+  .my-medium
+    margin-top: var(--bal-space-medium-desktop) !important
+    margin-bottom: var(--bal-space-medium-desktop) !important
+  .my-large
+    margin-top: var(--bal-space-large-desktop) !important
+    margin-bottom: var(--bal-space-large-desktop) !important
+  .my-x-large
+    margin-top: var(--bal-space-x-large-desktop) !important
+    margin-bottom: var(--bal-space-x-large-desktop) !important
+  .my-xx-large
+    margin-top: var(--bal-space-xx-large-desktop) !important
+    margin-bottom: var(--bal-space-xx-large-desktop) !important
+  .my-xxx-large
+    margin-top: var(--bal-space-xxx-large-desktop) !important
+    margin-bottom: var(--bal-space-xxx-large-desktop) !important
+  .my-xxxx-large
+    margin-top: var(--bal-space-xxxx-large-desktop) !important
+    margin-bottom: var(--bal-space-xxxx-large-desktop) !important
+.mt-none
+  margin-top: 0 !important
+.mt-auto
+  margin-top: auto !important
+.mt-xx-small
+  margin-top: var(--bal-space-xx-small) !important
+.mt-x-small
+  margin-top: var(--bal-space-x-small) !important
+.mt-small
+  margin-top: var(--bal-space-small) !important
+.mt-normal
+  margin-top: var(--bal-space-normal) !important
+.mt-medium
+  margin-top: var(--bal-space-medium) !important
+.mt-large
+  margin-top: var(--bal-space-large) !important
+.mt-x-large
+  margin-top: var(--bal-space-x-large) !important
+.mt-xx-large
+  margin-top: var(--bal-space-xx-large) !important
+.mt-xxx-large
+  margin-top: var(--bal-space-xxx-large) !important
+.mt-xxxx-large
+  margin-top: var(--bal-space-xxxx-large) !important
++tablet
+  .mt-none
+    margin-top: 0 !important
+  .mt-auto
+    margin-top: auto !important
+  .mt-xx-small
+    margin-top: var(--bal-space-xx-small-tablet) !important
+  .mt-x-small
+    margin-top: var(--bal-space-x-small-tablet) !important
+  .mt-small
+    margin-top: var(--bal-space-small-tablet) !important
+  .mt-normal
+    margin-top: var(--bal-space-normal-tablet) !important
+  .mt-medium
+    margin-top: var(--bal-space-medium-tablet) !important
+  .mt-large
+    margin-top: var(--bal-space-large-tablet) !important
+  .mt-x-large
+    margin-top: var(--bal-space-x-large-tablet) !important
+  .mt-xx-large
+    margin-top: var(--bal-space-xx-large-tablet) !important
+  .mt-xxx-large
+    margin-top: var(--bal-space-xxx-large-tablet) !important
+  .mt-xxxx-large
+    margin-top: var(--bal-space-xxxx-large-tablet) !important
++desktop
+  .mt-none
+    margin-top: 0 !important
+  .mt-auto
+    margin-top: auto !important
+  .mt-xx-small
+    margin-top: var(--bal-space-xx-small-desktop) !important
+  .mt-x-small
+    margin-top: var(--bal-space-x-small-desktop) !important
+  .mt-small
+    margin-top: var(--bal-space-small-desktop) !important
+  .mt-normal
+    margin-top: var(--bal-space-normal-desktop) !important
+  .mt-medium
+    margin-top: var(--bal-space-medium-desktop) !important
+  .mt-large
+    margin-top: var(--bal-space-large-desktop) !important
+  .mt-x-large
+    margin-top: var(--bal-space-x-large-desktop) !important
+  .mt-xx-large
+    margin-top: var(--bal-space-xx-large-desktop) !important
+  .mt-xxx-large
+    margin-top: var(--bal-space-xxx-large-desktop) !important
+  .mt-xxxx-large
+    margin-top: var(--bal-space-xxxx-large-desktop) !important
+.mr-none
+  margin-right: 0 !important
+.mr-auto
+  margin-right: auto !important
+.mr-xx-small
+  margin-right: var(--bal-space-xx-small) !important
+.mr-x-small
+  margin-right: var(--bal-space-x-small) !important
+.mr-small
+  margin-right: var(--bal-space-small) !important
+.mr-normal
+  margin-right: var(--bal-space-normal) !important
+.mr-medium
+  margin-right: var(--bal-space-medium) !important
+.mr-large
+  margin-right: var(--bal-space-large) !important
+.mr-x-large
+  margin-right: var(--bal-space-x-large) !important
+.mr-xx-large
+  margin-right: var(--bal-space-xx-large) !important
+.mr-xxx-large
+  margin-right: var(--bal-space-xxx-large) !important
+.mr-xxxx-large
+  margin-right: var(--bal-space-xxxx-large) !important
++tablet
+  .mr-none
+    margin-right: 0 !important
+  .mr-auto
+    margin-right: auto !important
+  .mr-xx-small
+    margin-right: var(--bal-space-xx-small-tablet) !important
+  .mr-x-small
+    margin-right: var(--bal-space-x-small-tablet) !important
+  .mr-small
+    margin-right: var(--bal-space-small-tablet) !important
+  .mr-normal
+    margin-right: var(--bal-space-normal-tablet) !important
+  .mr-medium
+    margin-right: var(--bal-space-medium-tablet) !important
+  .mr-large
+    margin-right: var(--bal-space-large-tablet) !important
+  .mr-x-large
+    margin-right: var(--bal-space-x-large-tablet) !important
+  .mr-xx-large
+    margin-right: var(--bal-space-xx-large-tablet) !important
+  .mr-xxx-large
+    margin-right: var(--bal-space-xxx-large-tablet) !important
+  .mr-xxxx-large
+    margin-right: var(--bal-space-xxxx-large-tablet) !important
++desktop
+  .mr-none
+    margin-right: 0 !important
+  .mr-auto
+    margin-right: auto !important
+  .mr-xx-small
+    margin-right: var(--bal-space-xx-small-desktop) !important
+  .mr-x-small
+    margin-right: var(--bal-space-x-small-desktop) !important
+  .mr-small
+    margin-right: var(--bal-space-small-desktop) !important
+  .mr-normal
+    margin-right: var(--bal-space-normal-desktop) !important
+  .mr-medium
+    margin-right: var(--bal-space-medium-desktop) !important
+  .mr-large
+    margin-right: var(--bal-space-large-desktop) !important
+  .mr-x-large
+    margin-right: var(--bal-space-x-large-desktop) !important
+  .mr-xx-large
+    margin-right: var(--bal-space-xx-large-desktop) !important
+  .mr-xxx-large
+    margin-right: var(--bal-space-xxx-large-desktop) !important
+  .mr-xxxx-large
+    margin-right: var(--bal-space-xxxx-large-desktop) !important
+.mb-none
+  margin-bottom: 0 !important
+.mb-auto
+  margin-bottom: auto !important
+.mb-xx-small
+  margin-bottom: var(--bal-space-xx-small) !important
+.mb-x-small
+  margin-bottom: var(--bal-space-x-small) !important
+.mb-small
+  margin-bottom: var(--bal-space-small) !important
+.mb-normal
+  margin-bottom: var(--bal-space-normal) !important
+.mb-medium
+  margin-bottom: var(--bal-space-medium) !important
+.mb-large
+  margin-bottom: var(--bal-space-large) !important
+.mb-x-large
+  margin-bottom: var(--bal-space-x-large) !important
+.mb-xx-large
+  margin-bottom: var(--bal-space-xx-large) !important
+.mb-xxx-large
+  margin-bottom: var(--bal-space-xxx-large) !important
+.mb-xxxx-large
+  margin-bottom: var(--bal-space-xxxx-large) !important
++tablet
+  .mb-none
+    margin-bottom: 0 !important
+  .mb-auto
+    margin-bottom: auto !important
+  .mb-xx-small
+    margin-bottom: var(--bal-space-xx-small-tablet) !important
+  .mb-x-small
+    margin-bottom: var(--bal-space-x-small-tablet) !important
+  .mb-small
+    margin-bottom: var(--bal-space-small-tablet) !important
+  .mb-normal
+    margin-bottom: var(--bal-space-normal-tablet) !important
+  .mb-medium
+    margin-bottom: var(--bal-space-medium-tablet) !important
+  .mb-large
+    margin-bottom: var(--bal-space-large-tablet) !important
+  .mb-x-large
+    margin-bottom: var(--bal-space-x-large-tablet) !important
+  .mb-xx-large
+    margin-bottom: var(--bal-space-xx-large-tablet) !important
+  .mb-xxx-large
+    margin-bottom: var(--bal-space-xxx-large-tablet) !important
+  .mb-xxxx-large
+    margin-bottom: var(--bal-space-xxxx-large-tablet) !important
++desktop
+  .mb-none
+    margin-bottom: 0 !important
+  .mb-auto
+    margin-bottom: auto !important
+  .mb-xx-small
+    margin-bottom: var(--bal-space-xx-small-desktop) !important
+  .mb-x-small
+    margin-bottom: var(--bal-space-x-small-desktop) !important
+  .mb-small
+    margin-bottom: var(--bal-space-small-desktop) !important
+  .mb-normal
+    margin-bottom: var(--bal-space-normal-desktop) !important
+  .mb-medium
+    margin-bottom: var(--bal-space-medium-desktop) !important
+  .mb-large
+    margin-bottom: var(--bal-space-large-desktop) !important
+  .mb-x-large
+    margin-bottom: var(--bal-space-x-large-desktop) !important
+  .mb-xx-large
+    margin-bottom: var(--bal-space-xx-large-desktop) !important
+  .mb-xxx-large
+    margin-bottom: var(--bal-space-xxx-large-desktop) !important
+  .mb-xxxx-large
+    margin-bottom: var(--bal-space-xxxx-large-desktop) !important
+.ml-none
+  margin-left: 0 !important
+.ml-auto
+  margin-left: auto !important
+.ml-xx-small
+  margin-left: var(--bal-space-xx-small) !important
+.ml-x-small
+  margin-left: var(--bal-space-x-small) !important
+.ml-small
+  margin-left: var(--bal-space-small) !important
+.ml-normal
+  margin-left: var(--bal-space-normal) !important
+.ml-medium
+  margin-left: var(--bal-space-medium) !important
+.ml-large
+  margin-left: var(--bal-space-large) !important
+.ml-x-large
+  margin-left: var(--bal-space-x-large) !important
+.ml-xx-large
+  margin-left: var(--bal-space-xx-large) !important
+.ml-xxx-large
+  margin-left: var(--bal-space-xxx-large) !important
+.ml-xxxx-large
+  margin-left: var(--bal-space-xxxx-large) !important
++tablet
+  .ml-none
+    margin-left: 0 !important
+  .ml-auto
+    margin-left: auto !important
+  .ml-xx-small
+    margin-left: var(--bal-space-xx-small-tablet) !important
+  .ml-x-small
+    margin-left: var(--bal-space-x-small-tablet) !important
+  .ml-small
+    margin-left: var(--bal-space-small-tablet) !important
+  .ml-normal
+    margin-left: var(--bal-space-normal-tablet) !important
+  .ml-medium
+    margin-left: var(--bal-space-medium-tablet) !important
+  .ml-large
+    margin-left: var(--bal-space-large-tablet) !important
+  .ml-x-large
+    margin-left: var(--bal-space-x-large-tablet) !important
+  .ml-xx-large
+    margin-left: var(--bal-space-xx-large-tablet) !important
+  .ml-xxx-large
+    margin-left: var(--bal-space-xxx-large-tablet) !important
+  .ml-xxxx-large
+    margin-left: var(--bal-space-xxxx-large-tablet) !important
++desktop
+  .ml-none
+    margin-left: 0 !important
+  .ml-auto
+    margin-left: auto !important
+  .ml-xx-small
+    margin-left: var(--bal-space-xx-small-desktop) !important
+  .ml-x-small
+    margin-left: var(--bal-space-x-small-desktop) !important
+  .ml-small
+    margin-left: var(--bal-space-small-desktop) !important
+  .ml-normal
+    margin-left: var(--bal-space-normal-desktop) !important
+  .ml-medium
+    margin-left: var(--bal-space-medium-desktop) !important
+  .ml-large
+    margin-left: var(--bal-space-large-desktop) !important
+  .ml-x-large
+    margin-left: var(--bal-space-x-large-desktop) !important
+  .ml-xx-large
+    margin-left: var(--bal-space-xx-large-desktop) !important
+  .ml-xxx-large
+    margin-left: var(--bal-space-xxx-large-desktop) !important
+  .ml-xxxx-large
+    margin-left: var(--bal-space-xxxx-large-desktop) !important
+.p-none
+  padding: 0 !important
+.p-auto
+  padding: auto !important
+.p-xx-small
+  padding: var(--bal-space-xx-small) !important
+.p-x-small
+  padding: var(--bal-space-x-small) !important
+.p-small
+  padding: var(--bal-space-small) !important
+.p-normal
+  padding: var(--bal-space-normal) !important
+.p-medium
+  padding: var(--bal-space-medium) !important
+.p-large
+  padding: var(--bal-space-large) !important
+.p-x-large
+  padding: var(--bal-space-x-large) !important
+.p-xx-large
+  padding: var(--bal-space-xx-large) !important
+.p-xxx-large
+  padding: var(--bal-space-xxx-large) !important
+.p-xxxx-large
+  padding: var(--bal-space-xxxx-large) !important
++tablet
+  .p-none
+    padding: 0 !important
+  .p-auto
+    padding: auto !important
+  .p-xx-small
+    padding: var(--bal-space-xx-small-tablet) !important
+  .p-x-small
+    padding: var(--bal-space-x-small-tablet) !important
+  .p-small
+    padding: var(--bal-space-small-tablet) !important
+  .p-normal
+    padding: var(--bal-space-normal-tablet) !important
+  .p-medium
+    padding: var(--bal-space-medium-tablet) !important
+  .p-large
+    padding: var(--bal-space-large-tablet) !important
+  .p-x-large
+    padding: var(--bal-space-x-large-tablet) !important
+  .p-xx-large
+    padding: var(--bal-space-xx-large-tablet) !important
+  .p-xxx-large
+    padding: var(--bal-space-xxx-large-tablet) !important
+  .p-xxxx-large
+    padding: var(--bal-space-xxxx-large-tablet) !important
++desktop
+  .p-none
+    padding: 0 !important
+  .p-auto
+    padding: auto !important
+  .p-xx-small
+    padding: var(--bal-space-xx-small-desktop) !important
+  .p-x-small
+    padding: var(--bal-space-x-small-desktop) !important
+  .p-small
+    padding: var(--bal-space-small-desktop) !important
+  .p-normal
+    padding: var(--bal-space-normal-desktop) !important
+  .p-medium
+    padding: var(--bal-space-medium-desktop) !important
+  .p-large
+    padding: var(--bal-space-large-desktop) !important
+  .p-x-large
+    padding: var(--bal-space-x-large-desktop) !important
+  .p-xx-large
+    padding: var(--bal-space-xx-large-desktop) !important
+  .p-xxx-large
+    padding: var(--bal-space-xxx-large-desktop) !important
+  .p-xxxx-large
+    padding: var(--bal-space-xxxx-large-desktop) !important
+.px-none
+  padding-left: 0 !important
+  padding-right: 0 !important
+.px-auto
+  padding-left: auto !important
+  padding-right: auto !important
+.px-xx-small
+  padding-left: var(--bal-space-xx-small) !important
+  padding-right: var(--bal-space-xx-small) !important
+.px-x-small
+  padding-left: var(--bal-space-x-small) !important
+  padding-right: var(--bal-space-x-small) !important
+.px-small
+  padding-left: var(--bal-space-small) !important
+  padding-right: var(--bal-space-small) !important
+.px-normal
+  padding-left: var(--bal-space-normal) !important
+  padding-right: var(--bal-space-normal) !important
+.px-medium
+  padding-left: var(--bal-space-medium) !important
+  padding-right: var(--bal-space-medium) !important
+.px-large
+  padding-left: var(--bal-space-large) !important
+  padding-right: var(--bal-space-large) !important
+.px-x-large
+  padding-left: var(--bal-space-x-large) !important
+  padding-right: var(--bal-space-x-large) !important
+.px-xx-large
+  padding-left: var(--bal-space-xx-large) !important
+  padding-right: var(--bal-space-xx-large) !important
+.px-xxx-large
+  padding-left: var(--bal-space-xxx-large) !important
+  padding-right: var(--bal-space-xxx-large) !important
+.px-xxxx-large
+  padding-left: var(--bal-space-xxxx-large) !important
+  padding-right: var(--bal-space-xxxx-large) !important
++tablet
+  .px-none
+    padding-left: 0 !important
+    padding-right: 0 !important
+  .px-auto
+    padding-left: auto !important
+    padding-right: auto !important
+  .px-xx-small
+    padding-left: var(--bal-space-xx-small-tablet) !important
+    padding-right: var(--bal-space-xx-small-tablet) !important
+  .px-x-small
+    padding-left: var(--bal-space-x-small-tablet) !important
+    padding-right: var(--bal-space-x-small-tablet) !important
+  .px-small
+    padding-left: var(--bal-space-small-tablet) !important
+    padding-right: var(--bal-space-small-tablet) !important
+  .px-normal
+    padding-left: var(--bal-space-normal-tablet) !important
+    padding-right: var(--bal-space-normal-tablet) !important
+  .px-medium
+    padding-left: var(--bal-space-medium-tablet) !important
+    padding-right: var(--bal-space-medium-tablet) !important
+  .px-large
+    padding-left: var(--bal-space-large-tablet) !important
+    padding-right: var(--bal-space-large-tablet) !important
+  .px-x-large
+    padding-left: var(--bal-space-x-large-tablet) !important
+    padding-right: var(--bal-space-x-large-tablet) !important
+  .px-xx-large
+    padding-left: var(--bal-space-xx-large-tablet) !important
+    padding-right: var(--bal-space-xx-large-tablet) !important
+  .px-xxx-large
+    padding-left: var(--bal-space-xxx-large-tablet) !important
+    padding-right: var(--bal-space-xxx-large-tablet) !important
+  .px-xxxx-large
+    padding-left: var(--bal-space-xxxx-large-tablet) !important
+    padding-right: var(--bal-space-xxxx-large-tablet) !important
++desktop
+  .px-none
+    padding-left: 0 !important
+    padding-right: 0 !important
+  .px-auto
+    padding-left: auto !important
+    padding-right: auto !important
+  .px-xx-small
+    padding-left: var(--bal-space-xx-small-desktop) !important
+    padding-right: var(--bal-space-xx-small-desktop) !important
+  .px-x-small
+    padding-left: var(--bal-space-x-small-desktop) !important
+    padding-right: var(--bal-space-x-small-desktop) !important
+  .px-small
+    padding-left: var(--bal-space-small-desktop) !important
+    padding-right: var(--bal-space-small-desktop) !important
+  .px-normal
+    padding-left: var(--bal-space-normal-desktop) !important
+    padding-right: var(--bal-space-normal-desktop) !important
+  .px-medium
+    padding-left: var(--bal-space-medium-desktop) !important
+    padding-right: var(--bal-space-medium-desktop) !important
+  .px-large
+    padding-left: var(--bal-space-large-desktop) !important
+    padding-right: var(--bal-space-large-desktop) !important
+  .px-x-large
+    padding-left: var(--bal-space-x-large-desktop) !important
+    padding-right: var(--bal-space-x-large-desktop) !important
+  .px-xx-large
+    padding-left: var(--bal-space-xx-large-desktop) !important
+    padding-right: var(--bal-space-xx-large-desktop) !important
+  .px-xxx-large
+    padding-left: var(--bal-space-xxx-large-desktop) !important
+    padding-right: var(--bal-space-xxx-large-desktop) !important
+  .px-xxxx-large
+    padding-left: var(--bal-space-xxxx-large-desktop) !important
+    padding-right: var(--bal-space-xxxx-large-desktop) !important
+.py-none
+  padding-top: 0 !important
+  padding-bottom: 0 !important
+.py-auto
+  padding-top: auto !important
+  padding-bottom: auto !important
+.py-xx-small
+  padding-top: var(--bal-space-xx-small) !important
+  padding-bottom: var(--bal-space-xx-small) !important
+.py-x-small
+  padding-top: var(--bal-space-x-small) !important
+  padding-bottom: var(--bal-space-x-small) !important
+.py-small
+  padding-top: var(--bal-space-small) !important
+  padding-bottom: var(--bal-space-small) !important
+.py-normal
+  padding-top: var(--bal-space-normal) !important
+  padding-bottom: var(--bal-space-normal) !important
+.py-medium
+  padding-top: var(--bal-space-medium) !important
+  padding-bottom: var(--bal-space-medium) !important
+.py-large
+  padding-top: var(--bal-space-large) !important
+  padding-bottom: var(--bal-space-large) !important
+.py-x-large
+  padding-top: var(--bal-space-x-large) !important
+  padding-bottom: var(--bal-space-x-large) !important
+.py-xx-large
+  padding-top: var(--bal-space-xx-large) !important
+  padding-bottom: var(--bal-space-xx-large) !important
+.py-xxx-large
+  padding-top: var(--bal-space-xxx-large) !important
+  padding-bottom: var(--bal-space-xxx-large) !important
+.py-xxxx-large
+  padding-top: var(--bal-space-xxxx-large) !important
+  padding-bottom: var(--bal-space-xxxx-large) !important
++tablet
+  .py-none
+    padding-top: 0 !important
+    padding-bottom: 0 !important
+  .py-auto
+    padding-top: auto !important
+    padding-bottom: auto !important
+  .py-xx-small
+    padding-top: var(--bal-space-xx-small-tablet) !important
+    padding-bottom: var(--bal-space-xx-small-tablet) !important
+  .py-x-small
+    padding-top: var(--bal-space-x-small-tablet) !important
+    padding-bottom: var(--bal-space-x-small-tablet) !important
+  .py-small
+    padding-top: var(--bal-space-small-tablet) !important
+    padding-bottom: var(--bal-space-small-tablet) !important
+  .py-normal
+    padding-top: var(--bal-space-normal-tablet) !important
+    padding-bottom: var(--bal-space-normal-tablet) !important
+  .py-medium
+    padding-top: var(--bal-space-medium-tablet) !important
+    padding-bottom: var(--bal-space-medium-tablet) !important
+  .py-large
+    padding-top: var(--bal-space-large-tablet) !important
+    padding-bottom: var(--bal-space-large-tablet) !important
+  .py-x-large
+    padding-top: var(--bal-space-x-large-tablet) !important
+    padding-bottom: var(--bal-space-x-large-tablet) !important
+  .py-xx-large
+    padding-top: var(--bal-space-xx-large-tablet) !important
+    padding-bottom: var(--bal-space-xx-large-tablet) !important
+  .py-xxx-large
+    padding-top: var(--bal-space-xxx-large-tablet) !important
+    padding-bottom: var(--bal-space-xxx-large-tablet) !important
+  .py-xxxx-large
+    padding-top: var(--bal-space-xxxx-large-tablet) !important
+    padding-bottom: var(--bal-space-xxxx-large-tablet) !important
++desktop
+  .py-none
+    padding-top: 0 !important
+    padding-bottom: 0 !important
+  .py-auto
+    padding-top: auto !important
+    padding-bottom: auto !important
+  .py-xx-small
+    padding-top: var(--bal-space-xx-small-desktop) !important
+    padding-bottom: var(--bal-space-xx-small-desktop) !important
+  .py-x-small
+    padding-top: var(--bal-space-x-small-desktop) !important
+    padding-bottom: var(--bal-space-x-small-desktop) !important
+  .py-small
+    padding-top: var(--bal-space-small-desktop) !important
+    padding-bottom: var(--bal-space-small-desktop) !important
+  .py-normal
+    padding-top: var(--bal-space-normal-desktop) !important
+    padding-bottom: var(--bal-space-normal-desktop) !important
+  .py-medium
+    padding-top: var(--bal-space-medium-desktop) !important
+    padding-bottom: var(--bal-space-medium-desktop) !important
+  .py-large
+    padding-top: var(--bal-space-large-desktop) !important
+    padding-bottom: var(--bal-space-large-desktop) !important
+  .py-x-large
+    padding-top: var(--bal-space-x-large-desktop) !important
+    padding-bottom: var(--bal-space-x-large-desktop) !important
+  .py-xx-large
+    padding-top: var(--bal-space-xx-large-desktop) !important
+    padding-bottom: var(--bal-space-xx-large-desktop) !important
+  .py-xxx-large
+    padding-top: var(--bal-space-xxx-large-desktop) !important
+    padding-bottom: var(--bal-space-xxx-large-desktop) !important
+  .py-xxxx-large
+    padding-top: var(--bal-space-xxxx-large-desktop) !important
+    padding-bottom: var(--bal-space-xxxx-large-desktop) !important
+.pt-none
+  padding-top: 0 !important
+.pt-auto
+  padding-top: auto !important
+.pt-xx-small
+  padding-top: var(--bal-space-xx-small) !important
+.pt-x-small
+  padding-top: var(--bal-space-x-small) !important
+.pt-small
+  padding-top: var(--bal-space-small) !important
+.pt-normal
+  padding-top: var(--bal-space-normal) !important
+.pt-medium
+  padding-top: var(--bal-space-medium) !important
+.pt-large
+  padding-top: var(--bal-space-large) !important
+.pt-x-large
+  padding-top: var(--bal-space-x-large) !important
+.pt-xx-large
+  padding-top: var(--bal-space-xx-large) !important
+.pt-xxx-large
+  padding-top: var(--bal-space-xxx-large) !important
+.pt-xxxx-large
+  padding-top: var(--bal-space-xxxx-large) !important
++tablet
+  .pt-none
+    padding-top: 0 !important
+  .pt-auto
+    padding-top: auto !important
+  .pt-xx-small
+    padding-top: var(--bal-space-xx-small-tablet) !important
+  .pt-x-small
+    padding-top: var(--bal-space-x-small-tablet) !important
+  .pt-small
+    padding-top: var(--bal-space-small-tablet) !important
+  .pt-normal
+    padding-top: var(--bal-space-normal-tablet) !important
+  .pt-medium
+    padding-top: var(--bal-space-medium-tablet) !important
+  .pt-large
+    padding-top: var(--bal-space-large-tablet) !important
+  .pt-x-large
+    padding-top: var(--bal-space-x-large-tablet) !important
+  .pt-xx-large
+    padding-top: var(--bal-space-xx-large-tablet) !important
+  .pt-xxx-large
+    padding-top: var(--bal-space-xxx-large-tablet) !important
+  .pt-xxxx-large
+    padding-top: var(--bal-space-xxxx-large-tablet) !important
++desktop
+  .pt-none
+    padding-top: 0 !important
+  .pt-auto
+    padding-top: auto !important
+  .pt-xx-small
+    padding-top: var(--bal-space-xx-small-desktop) !important
+  .pt-x-small
+    padding-top: var(--bal-space-x-small-desktop) !important
+  .pt-small
+    padding-top: var(--bal-space-small-desktop) !important
+  .pt-normal
+    padding-top: var(--bal-space-normal-desktop) !important
+  .pt-medium
+    padding-top: var(--bal-space-medium-desktop) !important
+  .pt-large
+    padding-top: var(--bal-space-large-desktop) !important
+  .pt-x-large
+    padding-top: var(--bal-space-x-large-desktop) !important
+  .pt-xx-large
+    padding-top: var(--bal-space-xx-large-desktop) !important
+  .pt-xxx-large
+    padding-top: var(--bal-space-xxx-large-desktop) !important
+  .pt-xxxx-large
+    padding-top: var(--bal-space-xxxx-large-desktop) !important
+.pr-none
+  padding-right: 0 !important
+.pr-auto
+  padding-right: auto !important
+.pr-xx-small
+  padding-right: var(--bal-space-xx-small) !important
+.pr-x-small
+  padding-right: var(--bal-space-x-small) !important
+.pr-small
+  padding-right: var(--bal-space-small) !important
+.pr-normal
+  padding-right: var(--bal-space-normal) !important
+.pr-medium
+  padding-right: var(--bal-space-medium) !important
+.pr-large
+  padding-right: var(--bal-space-large) !important
+.pr-x-large
+  padding-right: var(--bal-space-x-large) !important
+.pr-xx-large
+  padding-right: var(--bal-space-xx-large) !important
+.pr-xxx-large
+  padding-right: var(--bal-space-xxx-large) !important
+.pr-xxxx-large
+  padding-right: var(--bal-space-xxxx-large) !important
++tablet
+  .pr-none
+    padding-right: 0 !important
+  .pr-auto
+    padding-right: auto !important
+  .pr-xx-small
+    padding-right: var(--bal-space-xx-small-tablet) !important
+  .pr-x-small
+    padding-right: var(--bal-space-x-small-tablet) !important
+  .pr-small
+    padding-right: var(--bal-space-small-tablet) !important
+  .pr-normal
+    padding-right: var(--bal-space-normal-tablet) !important
+  .pr-medium
+    padding-right: var(--bal-space-medium-tablet) !important
+  .pr-large
+    padding-right: var(--bal-space-large-tablet) !important
+  .pr-x-large
+    padding-right: var(--bal-space-x-large-tablet) !important
+  .pr-xx-large
+    padding-right: var(--bal-space-xx-large-tablet) !important
+  .pr-xxx-large
+    padding-right: var(--bal-space-xxx-large-tablet) !important
+  .pr-xxxx-large
+    padding-right: var(--bal-space-xxxx-large-tablet) !important
++desktop
+  .pr-none
+    padding-right: 0 !important
+  .pr-auto
+    padding-right: auto !important
+  .pr-xx-small
+    padding-right: var(--bal-space-xx-small-desktop) !important
+  .pr-x-small
+    padding-right: var(--bal-space-x-small-desktop) !important
+  .pr-small
+    padding-right: var(--bal-space-small-desktop) !important
+  .pr-normal
+    padding-right: var(--bal-space-normal-desktop) !important
+  .pr-medium
+    padding-right: var(--bal-space-medium-desktop) !important
+  .pr-large
+    padding-right: var(--bal-space-large-desktop) !important
+  .pr-x-large
+    padding-right: var(--bal-space-x-large-desktop) !important
+  .pr-xx-large
+    padding-right: var(--bal-space-xx-large-desktop) !important
+  .pr-xxx-large
+    padding-right: var(--bal-space-xxx-large-desktop) !important
+  .pr-xxxx-large
+    padding-right: var(--bal-space-xxxx-large-desktop) !important
+.pb-none
+  padding-bottom: 0 !important
+.pb-auto
+  padding-bottom: auto !important
+.pb-xx-small
+  padding-bottom: var(--bal-space-xx-small) !important
+.pb-x-small
+  padding-bottom: var(--bal-space-x-small) !important
+.pb-small
+  padding-bottom: var(--bal-space-small) !important
+.pb-normal
+  padding-bottom: var(--bal-space-normal) !important
+.pb-medium
+  padding-bottom: var(--bal-space-medium) !important
+.pb-large
+  padding-bottom: var(--bal-space-large) !important
+.pb-x-large
+  padding-bottom: var(--bal-space-x-large) !important
+.pb-xx-large
+  padding-bottom: var(--bal-space-xx-large) !important
+.pb-xxx-large
+  padding-bottom: var(--bal-space-xxx-large) !important
+.pb-xxxx-large
+  padding-bottom: var(--bal-space-xxxx-large) !important
++tablet
+  .pb-none
+    padding-bottom: 0 !important
+  .pb-auto
+    padding-bottom: auto !important
+  .pb-xx-small
+    padding-bottom: var(--bal-space-xx-small-tablet) !important
+  .pb-x-small
+    padding-bottom: var(--bal-space-x-small-tablet) !important
+  .pb-small
+    padding-bottom: var(--bal-space-small-tablet) !important
+  .pb-normal
+    padding-bottom: var(--bal-space-normal-tablet) !important
+  .pb-medium
+    padding-bottom: var(--bal-space-medium-tablet) !important
+  .pb-large
+    padding-bottom: var(--bal-space-large-tablet) !important
+  .pb-x-large
+    padding-bottom: var(--bal-space-x-large-tablet) !important
+  .pb-xx-large
+    padding-bottom: var(--bal-space-xx-large-tablet) !important
+  .pb-xxx-large
+    padding-bottom: var(--bal-space-xxx-large-tablet) !important
+  .pb-xxxx-large
+    padding-bottom: var(--bal-space-xxxx-large-tablet) !important
++desktop
+  .pb-none
+    padding-bottom: 0 !important
+  .pb-auto
+    padding-bottom: auto !important
+  .pb-xx-small
+    padding-bottom: var(--bal-space-xx-small-desktop) !important
+  .pb-x-small
+    padding-bottom: var(--bal-space-x-small-desktop) !important
+  .pb-small
+    padding-bottom: var(--bal-space-small-desktop) !important
+  .pb-normal
+    padding-bottom: var(--bal-space-normal-desktop) !important
+  .pb-medium
+    padding-bottom: var(--bal-space-medium-desktop) !important
+  .pb-large
+    padding-bottom: var(--bal-space-large-desktop) !important
+  .pb-x-large
+    padding-bottom: var(--bal-space-x-large-desktop) !important
+  .pb-xx-large
+    padding-bottom: var(--bal-space-xx-large-desktop) !important
+  .pb-xxx-large
+    padding-bottom: var(--bal-space-xxx-large-desktop) !important
+  .pb-xxxx-large
+    padding-bottom: var(--bal-space-xxxx-large-desktop) !important
+.pl-none
+  padding-left: 0 !important
+.pl-auto
+  padding-left: auto !important
+.pl-xx-small
+  padding-left: var(--bal-space-xx-small) !important
+.pl-x-small
+  padding-left: var(--bal-space-x-small) !important
+.pl-small
+  padding-left: var(--bal-space-small) !important
+.pl-normal
+  padding-left: var(--bal-space-normal) !important
+.pl-medium
+  padding-left: var(--bal-space-medium) !important
+.pl-large
+  padding-left: var(--bal-space-large) !important
+.pl-x-large
+  padding-left: var(--bal-space-x-large) !important
+.pl-xx-large
+  padding-left: var(--bal-space-xx-large) !important
+.pl-xxx-large
+  padding-left: var(--bal-space-xxx-large) !important
+.pl-xxxx-large
+  padding-left: var(--bal-space-xxxx-large) !important
++tablet
+  .pl-none
+    padding-left: 0 !important
+  .pl-auto
+    padding-left: auto !important
+  .pl-xx-small
+    padding-left: var(--bal-space-xx-small-tablet) !important
+  .pl-x-small
+    padding-left: var(--bal-space-x-small-tablet) !important
+  .pl-small
+    padding-left: var(--bal-space-small-tablet) !important
+  .pl-normal
+    padding-left: var(--bal-space-normal-tablet) !important
+  .pl-medium
+    padding-left: var(--bal-space-medium-tablet) !important
+  .pl-large
+    padding-left: var(--bal-space-large-tablet) !important
+  .pl-x-large
+    padding-left: var(--bal-space-x-large-tablet) !important
+  .pl-xx-large
+    padding-left: var(--bal-space-xx-large-tablet) !important
+  .pl-xxx-large
+    padding-left: var(--bal-space-xxx-large-tablet) !important
+  .pl-xxxx-large
+    padding-left: var(--bal-space-xxxx-large-tablet) !important
++desktop
+  .pl-none
+    padding-left: 0 !important
+  .pl-auto
+    padding-left: auto !important
+  .pl-xx-small
+    padding-left: var(--bal-space-xx-small-desktop) !important
+  .pl-x-small
+    padding-left: var(--bal-space-x-small-desktop) !important
+  .pl-small
+    padding-left: var(--bal-space-small-desktop) !important
+  .pl-normal
+    padding-left: var(--bal-space-normal-desktop) !important
+  .pl-medium
+    padding-left: var(--bal-space-medium-desktop) !important
+  .pl-large
+    padding-left: var(--bal-space-large-desktop) !important
+  .pl-x-large
+    padding-left: var(--bal-space-x-large-desktop) !important
+  .pl-xx-large
+    padding-left: var(--bal-space-xx-large-desktop) !important
+  .pl-xxx-large
+    padding-left: var(--bal-space-xxx-large-desktop) !important
+  .pl-xxxx-large
+    padding-left: var(--bal-space-xxxx-large-desktop) !important