@apolitical/component-library 8.3.7-st.2 → 8.3.7-st.3

package/styles/uclasses/uclasses.scss

@@ -0,0 +1,978 @@
+@import '../variables';
+@import '../mixins';
+
+//  add a prefix to all the utility classes
+$util-prefix: 'u-' !default;
+$font-size-s: 0.75rem;
+$font-size: 0.875rem;
+$font-size-md: 1rem;
+
+// form elements
+.#{$util-prefix}text-align-left {
+  text-align: left;
+}
+
+.#{$util-prefix}margin-bottom-half {
+  margin-bottom: 0.5rem;
+}
+
+.#{$util-prefix}margin-bottom-one {
+  margin-bottom: 1rem;
+}
+
+.#{$util-prefix}margin-bottom-one-point-five {
+  margin-bottom: 1.5rem;
+}
+
+.#{$util-prefix}display-block {
+  display: block;
+}
+
+.#{$util-prefix}text-small {
+  font-size: $font-size-s;
+  line-height: $font-size-md;
+
+  @include breakpoint('min-width', 'md') {
+    font-size: $font-size;
+  }
+}
+
+// typography
+.#{$util-prefix}grey-text {
+  color: get-map($default-colors, 'n600');
+}
+
+.#{$util-prefix}error-text {
+  color: get-map($default-colors, 'error600');
+}
+
+// variables
+// flexbox
+.#{$util-prefix}flex {
+  display: flex;
+}
+.#{$util-prefix}inline-flex {
+  display: inline-flex;
+}
+.#{$util-prefix}flex-wrap {
+  flex-wrap: wrap;
+}
+.#{$util-prefix}flex-nowrap {
+  flex-wrap: nowrap;
+}
+.#{$util-prefix}flex-col {
+  flex-direction: column;
+}
+.#{$util-prefix}flex-col-reverse {
+  flex-direction: column-reverse;
+}
+.#{$util-prefix}flex-row {
+  flex-direction: row;
+}
+.#{$util-prefix}flex-row-reverse {
+  flex-direction: row-reverse;
+}
+.#{$util-prefix}flex-center {
+  justify-content: center;
+  align-items: center;
+}
+.#{$util-prefix}flex-grow {
+  flex-grow: 1;
+}
+.#{$util-prefix}flex-grow-0 {
+  flex-grow: 0;
+}
+.#{$util-prefix}flex-shrink {
+  flex-shrink: 1;
+}
+.#{$util-prefix}flex-shrink-0 {
+  flex-shrink: 0;
+}
+.#{$util-prefix}flex-basis-0 {
+  flex-basis: 0;
+}
+
+// justify-content
+.#{$util-prefix}justify-start {
+  justify-content: flex-start;
+}
+.#{$util-prefix}justify-end {
+  justify-content: flex-end;
+}
+.#{$util-prefix}justify-center {
+  justify-content: center;
+}
+.#{$util-prefix}justify-between {
+  justify-content: space-between;
+}
+
+// align-items
+.#{$util-prefix}items-center {
+  align-items: center;
+}
+.#{$util-prefix}items-start {
+  align-items: start;
+}
+.#{$util-prefix}items-end {
+  align-items: end;
+}
+.#{$util-prefix}items-baseline {
+  align-items: baseline;
+}
+.#{$util-prefix}items-stretch {
+  align-items: stretch;
+}
+
+// align-content
+.#{$util-prefix}content-start {
+  align-content: start;
+}
+.#{$util-prefix}content-end {
+  align-content: end;
+}
+.#{$util-prefix}content-center {
+  align-content: center;
+}
+.#{$util-prefix}content-between {
+  align-content: space-between;
+}
+
+// display
+.#{$util-prefix}block {
+  display: block;
+}
+.#{$util-prefix}inline-block {
+  display: inline-block;
+}
+.#{$util-prefix}inline {
+  display: inline;
+}
+.#{$util-prefix}contents {
+  display: contents;
+}
+.#{$util-prefix}grid {
+  display: grid;
+}
+.#{$util-prefix}inline-grid {
+  display: inline-grid;
+}
+.#{$util-prefix}hidden {
+  display: none;
+}
+
+// margin
+.#{$util-prefix}m-auto {
+  margin: auto;
+}
+.#{$util-prefix}m-0 {
+  margin: 0;
+}
+.#{$util-prefix}my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.#{$util-prefix}my-0 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.#{$util-prefix}mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.#{$util-prefix}mx-0 {
+  margin-left: 0;
+  margin-right: 0;
+}
+.#{$util-prefix}mt-auto {
+  margin-top: auto;
+}
+.#{$util-prefix}mt-0 {
+  margin-top: 0;
+}
+.#{$util-prefix}mr-auto {
+  margin-right: auto;
+}
+.#{$util-prefix}mr-0 {
+  margin-right: 0;
+}
+.#{$util-prefix}mb-auto {
+  margin-bottom: auto;
+}
+.#{$util-prefix}mb-0 {
+  margin-bottom: 0;
+}
+.#{$util-prefix}ml-auto {
+  margin-left: auto;
+}
+.#{$util-prefix}ml-0 {
+  margin-left: 0;
+}
+
+// padding
+.#{$util-prefix}py-0 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.#{$util-prefix}px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+.#{$util-prefix}pt-0 {
+  padding-top: 0;
+}
+.#{$util-prefix}pr-0 {
+  padding-right: 0;
+}
+.#{$util-prefix}pb-0 {
+  padding-bottom: 0;
+}
+.#{$util-prefix}pl-0 {
+  padding-left: 0;
+}
+
+// vertical-align
+.#{$util-prefix}align-baseline {
+  vertical-align: baseline;
+}
+.#{$util-prefix}align-sub {
+  vertical-align: sub;
+}
+.#{$util-prefix}align-super {
+  vertical-align: super;
+}
+.#{$util-prefix}align-text-top {
+  vertical-align: text-top;
+}
+.#{$util-prefix}align-text-bottom {
+  vertical-align: text-bottom;
+}
+.#{$util-prefix}align-top {
+  vertical-align: top;
+}
+.#{$util-prefix}align-middle {
+  vertical-align: middle;
+}
+.#{$util-prefix}align-bottom {
+  vertical-align: bottom;
+}
+
+// typography
+.#{$util-prefix}truncate,
+.#{$util-prefix}text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.#{$util-prefix}text-replace {
+  overflow: hidden;
+  color: transparent;
+  text-indent: 100%;
+  white-space: nowrap;
+}
+.#{$util-prefix}break-word {
+  overflow-wrap: break-word;
+  min-width: 0;
+}
+
+// text-transform
+.#{$util-prefix}uppercase {
+  text-transform: uppercase;
+}
+.#{$util-prefix}capitalize {
+  text-transform: capitalize;
+}
+
+// text-align
+.#{$util-prefix}text-center {
+  text-align: center;
+}
+.#{$util-prefix}text-left {
+  text-align: left;
+}
+.#{$util-prefix}text-right {
+  text-align: right;
+}
+.#{$util-prefix}text-justify {
+  text-align: justify;
+}
+
+// text-decoration
+.#{$util-prefix}line-through {
+  text-decoration: line-through;
+}
+.#{$util-prefix}underline {
+  text-decoration: underline;
+}
+.#{$util-prefix}text-decoration-none {
+  text-decoration: none;
+}
+
+// cursor
+.#{$util-prefix}cursor-pointer {
+  cursor: pointer;
+}
+.#{$util-prefix}cursor-default {
+  cursor: default;
+}
+
+// pointer-events
+.#{$util-prefix}pointer-events-auto {
+  pointer-events: auto;
+}
+.#{$util-prefix}pointer-events-none {
+  pointer-events: none;
+}
+
+// min-height
+.#{$util-prefix}min-h-0 {
+  min-height: 0;
+}
+.#{$util-prefix}min-h-full {
+  min-height: 100%;
+}
+.#{$util-prefix}min-h-screen {
+  min-height: 100vh;
+}
+
+// max-height
+.#{$util-prefix}max-h-full {
+  max-height: 100%;
+}
+.#{$util-prefix}max-h-screen {
+  max-height: 100vh;
+}
+
+// position
+.#{$util-prefix}relative {
+  position: relative;
+}
+.#{$util-prefix}absolute {
+  position: absolute;
+}
+.#{$util-prefix}fixed {
+  position: fixed;
+}
+.#{$util-prefix}sticky {
+  position: sticky;
+}
+.#{$util-prefix}static {
+  position: static;
+}
+.#{$util-prefix}inset-0 {
+  inset: 0;
+}
+
+// z-index
+.#{$util-prefix}z-0 {
+  z-index: 0;
+}
+.#{$util-prefix}z-1 {
+  z-index: 1;
+}
+.#{$util-prefix}z-2 {
+  z-index: 2;
+}
+.#{$util-prefix}z-3 {
+  z-index: 3;
+}
+
+// overflow
+.#{$util-prefix}overflow-visible {
+  overflow: visible;
+}
+.#{$util-prefix}overflow-hidden {
+  overflow: hidden;
+}
+.#{$util-prefix}overflow-x-hidden {
+  overflow-x: hidden;
+}
+.#{$util-prefix}overflow-y-hidden {
+  overflow-y: hidden;
+}
+.#{$util-prefix}overflow-clip {
+  overflow: clip;
+}
+.#{$util-prefix}overflow-x-clip {
+  overflow-x: clip;
+}
+.#{$util-prefix}overflow-y-clip {
+  overflow-y: clip;
+}
+.#{$util-prefix}overflow-auto {
+  overflow: auto;
+}
+.#{$util-prefix}momentum-scrolling {
+  -webkit-overflow-scrolling: touch;
+}
+
+// overscroll-behavior
+.#{$util-prefix}overscroll-contain {
+  overscroll-behavior: contain;
+}
+
+// scroll behavior
+.#{$util-prefix}scroll-smooth {
+  scroll-behavior: smooth;
+}
+
+// opacity
+.#{$util-prefix}opacity-0 {
+  opacity: 0;
+}
+.#{$util-prefix}opacity-25 {
+  opacity: 0.25;
+}
+.#{$util-prefix}opacity-50 {
+  opacity: 0.5;
+}
+.#{$util-prefix}opacity-75 {
+  opacity: 0.75;
+}
+.#{$util-prefix}opacity-100 {
+  opacity: 1;
+}
+.#{$util-prefix}border-dotted {
+  border-style: dotted;
+}
+.#{$util-prefix}border-dashed {
+  border-style: dashed;
+}
+
+// object-fit
+.#{$util-prefix}object-contain {
+  object-fit: contain;
+}
+.#{$util-prefix}object-cover {
+  object-fit: cover;
+}
+
+// transform
+.#{$util-prefix}rotate-90 {
+  rotate: 90deg;
+}
+.#{$util-prefix}rotate-180 {
+  rotate: 180deg;
+}
+.#{$util-prefix}rotate-270 {
+  rotate: 270deg;
+}
+
+// transform-origin
+.#{$util-prefix}origin-center {
+  transform-origin: center;
+}
+.#{$util-prefix}origin-top {
+  transform-origin: center top;
+}
+.#{$util-prefix}origin-right {
+  transform-origin: right center;
+}
+.#{$util-prefix}origin-bottom {
+  transform-origin: center bottom;
+}
+.#{$util-prefix}origin-left {
+  transform-origin: left center;
+}
+.#{$util-prefix}origin-top-left {
+  transform-origin: left top;
+}
+.#{$util-prefix}origin-top-right {
+  transform-origin: right top;
+}
+.#{$util-prefix}origin-bottom-left {
+  transform-origin: left bottom;
+}
+.#{$util-prefix}origin-bottom-right {
+  transform-origin: right bottom;
+}
+
+// visibility
+.#{$util-prefix}visible {
+  visibility: visible;
+}
+.#{$util-prefix}invisible {
+  visibility: hidden;
+}
+
+// width
+.#{$util-prefix}w-full {
+  width: 100%;
+}
+
+// max-width
+.#{$util-prefix}max-w-0 {
+  max-width: 0;
+}
+.#{$util-prefix}max-w-px {
+  max-width: 1px;
+}
+.#{$util-prefix}max-w-0-5 {
+  max-width: 0.125rem; /* 2px */
+}
+.#{$util-prefix}max-w-1 {
+  max-width: 0.25rem; /* 4px */
+}
+.#{$util-prefix}max-w-1-5 {
+  max-width: 0.375rem; /* 6px */
+}
+.#{$util-prefix}max-w-2 {
+  max-width: 0.5rem; /* 8px */
+}
+.#{$util-prefix}max-w-2-5 {
+  max-width: 0.625rem; /* 10px */
+}
+.#{$util-prefix}max-w-3 {
+  max-width: 0.75rem; /* 12px */
+}
+.#{$util-prefix}max-w-3-5 {
+  max-width: 0.875rem; /* 14px */
+}
+.#{$util-prefix}max-w-4 {
+  max-width: 1rem; /* 16px */
+}
+.#{$util-prefix}max-w-5 {
+  max-width: 1.25rem; /* 20px */
+}
+.#{$util-prefix}max-w-6 {
+  max-width: 1.5rem; /* 24px */
+}
+.#{$util-prefix}max-w-7 {
+  max-width: 1.75rem; /* 28px */
+}
+.#{$util-prefix}max-w-8 {
+  max-width: 2rem; /* 32px */
+}
+.#{$util-prefix}max-w-9 {
+  max-width: 2.25rem; /* 36px */
+}
+.#{$util-prefix}max-w-10 {
+  max-width: 2.5rem; /* 40px */
+}
+.#{$util-prefix}max-w-11 {
+  max-width: 2.75rem; /* 44px */
+}
+.#{$util-prefix}max-w-12 {
+  max-width: 3rem; /* 48px */
+}
+.#{$util-prefix}max-w-14 {
+  max-width: 3.5rem; /* 56px */
+}
+.#{$util-prefix}max-w-16 {
+  max-width: 4rem; /* 64px */
+}
+.#{$util-prefix}max-w-20 {
+  max-width: 5rem; /* 80px */
+}
+.#{$util-prefix}max-w-24 {
+  max-width: 6rem; /* 96px */
+}
+.#{$util-prefix}max-w-28 {
+  max-width: 7rem; /* 112px */
+}
+.#{$util-prefix}max-w-32 {
+  max-width: 8rem; /* 128px */
+}
+.#{$util-prefix}max-w-36 {
+  max-width: 9rem; /* 144px */
+}
+.#{$util-prefix}max-w-40 {
+  max-width: 10rem; /* 160px */
+}
+.#{$util-prefix}max-w-44 {
+  max-width: 11rem; /* 176px */
+}
+.#{$util-prefix}max-w-48 {
+  max-width: 12rem; /* 192px */
+}
+.#{$util-prefix}max-w-52 {
+  max-width: 13rem; /* 208px */
+}
+.#{$util-prefix}max-w-56 {
+  max-width: 14rem; /* 224px */
+}
+.#{$util-prefix}max-w-60 {
+  max-width: 15rem; /* 240px */
+}
+.#{$util-prefix}max-w-64 {
+  max-width: 16rem; /* 256px */
+}
+.#{$util-prefix}max-w-72 {
+  max-width: 18rem; /* 288px */
+}
+.#{$util-prefix}max-w-80 {
+  max-width: 20rem; /* 320px */
+}
+.#{$util-prefix}max-w-96 {
+  max-width: 24rem; /* 384px */
+}
+
+// Named max-width utilities
+.#{$util-prefix}max-w-none {
+  max-width: none;
+}
+.#{$util-prefix}max-w-xs {
+  max-width: 20rem; /* 320px */
+}
+.#{$util-prefix}max-w-sm {
+  max-width: 24rem; /* 384px */
+}
+.#{$util-prefix}max-w-md {
+  max-width: 28rem; /* 448px */
+}
+.#{$util-prefix}max-w-lg {
+  max-width: 32rem; /* 512px */
+}
+.#{$util-prefix}max-w-xl {
+  max-width: 36rem; /* 576px */
+}
+.#{$util-prefix}max-w-2xl {
+  max-width: 42rem; /* 672px */
+}
+.#{$util-prefix}max-w-3xl {
+  max-width: 48rem; /* 768px */
+}
+.#{$util-prefix}max-w-4xl {
+  max-width: 56rem; /* 896px */
+}
+.#{$util-prefix}max-w-5xl {
+  max-width: 64rem; /* 1024px */
+}
+.#{$util-prefix}max-w-6xl {
+  max-width: 72rem; /* 1152px */
+}
+.#{$util-prefix}max-w-7xl {
+  max-width: 80rem; /* 1280px */
+}
+
+// Special max-width utilities
+.#{$util-prefix}max-w-full {
+  max-width: 100%;
+}
+.#{$util-prefix}max-w-min {
+  max-width: min-content;
+}
+.#{$util-prefix}max-w-max {
+  max-width: max-content;
+}
+.#{$util-prefix}max-w-fit {
+  max-width: fit-content;
+}
+.#{$util-prefix}max-w-prose {
+  max-width: 65ch;
+}
+
+// Screen size max-width utilities
+.#{$util-prefix}max-w-screen-sm {
+  max-width: 640px;
+}
+.#{$util-prefix}max-w-screen-md {
+  max-width: 768px;
+}
+.#{$util-prefix}max-w-screen-lg {
+  max-width: 1024px;
+}
+.#{$util-prefix}max-w-screen-xl {
+  max-width: 1280px;
+}
+.#{$util-prefix}max-w-screen-2xl {
+  max-width: 1536px;
+}
+
+// Gap utilities
+.#{$util-prefix}gap-0 {
+  gap: 0;
+}
+.#{$util-prefix}gap-x-0 {
+  column-gap: 0;
+}
+.#{$util-prefix}gap-y-0 {
+  row-gap: 0;
+}
+.#{$util-prefix}gap-px {
+  gap: 1px;
+}
+.#{$util-prefix}gap-x-px {
+  column-gap: 1px;
+}
+.#{$util-prefix}gap-y-px {
+  row-gap: 1px;
+}
+.#{$util-prefix}gap-0-5 {
+  gap: 0.125rem; /* 2px */
+}
+.#{$util-prefix}gap-x-0-5 {
+  column-gap: 0.125rem; /* 2px */
+}
+.#{$util-prefix}gap-y-0-5 {
+  row-gap: 0.125rem; /* 2px */
+}
+.#{$util-prefix}gap-1 {
+  gap: 0.25rem; /* 4px */
+}
+.#{$util-prefix}gap-x-1 {
+  column-gap: 0.25rem; /* 4px */
+}
+.#{$util-prefix}gap-y-1 {
+  row-gap: 0.25rem; /* 4px */
+}
+.#{$util-prefix}gap-1-5 {
+  gap: 0.375rem; /* 6px */
+}
+.#{$util-prefix}gap-x-1-5 {
+  column-gap: 0.375rem; /* 6px */
+}
+.#{$util-prefix}gap-y-1-5 {
+  row-gap: 0.375rem; /* 6px */
+}
+.#{$util-prefix}gap-2 {
+  gap: 0.5rem; /* 8px */
+}
+.#{$util-prefix}gap-x-2 {
+  column-gap: 0.5rem; /* 8px */
+}
+.#{$util-prefix}gap-y-2 {
+  row-gap: 0.5rem; /* 8px */
+}
+.#{$util-prefix}gap-2-5 {
+  gap: 0.625rem; /* 10px */
+}
+.#{$util-prefix}gap-x-2-5 {
+  column-gap: 0.625rem; /* 10px */
+}
+.#{$util-prefix}gap-y-2-5 {
+  row-gap: 0.625rem; /* 10px */
+}
+.#{$util-prefix}gap-3 {
+  gap: 0.75rem; /* 12px */
+}
+.#{$util-prefix}gap-x-3 {
+  column-gap: 0.75rem; /* 12px */
+}
+.#{$util-prefix}gap-y-3 {
+  row-gap: 0.75rem; /* 12px */
+}
+.#{$util-prefix}gap-3-5 {
+  gap: 0.875rem; /* 14px */
+}
+.#{$util-prefix}gap-x-3-5 {
+  column-gap: 0.875rem; /* 14px */
+}
+.#{$util-prefix}gap-y-3-5 {
+  row-gap: 0.875rem; /* 14px */
+}
+.#{$util-prefix}gap-4 {
+  gap: 1rem; /* 16px */
+}
+.#{$util-prefix}gap-x-4 {
+  column-gap: 1rem; /* 16px */
+}
+.#{$util-prefix}gap-y-4 {
+  row-gap: 1rem; /* 16px */
+}
+.#{$util-prefix}gap-5 {
+  gap: 1.25rem; /* 20px */
+}
+.#{$util-prefix}gap-x-5 {
+  column-gap: 1.25rem; /* 20px */
+}
+.#{$util-prefix}gap-y-5 {
+  row-gap: 1.25rem; /* 20px */
+}
+.#{$util-prefix}gap-6 {
+  gap: 1.5rem; /* 24px */
+}
+.#{$util-prefix}gap-x-6 {
+  column-gap: 1.5rem; /* 24px */
+}
+.#{$util-prefix}gap-y-6 {
+  row-gap: 1.5rem; /* 24px */
+}
+.#{$util-prefix}gap-7 {
+  gap: 1.75rem; /* 28px */
+}
+.#{$util-prefix}gap-x-7 {
+  column-gap: 1.75rem; /* 28px */
+}
+.#{$util-prefix}gap-y-7 {
+  row-gap: 1.75rem; /* 28px */
+}
+.#{$util-prefix}gap-8 {
+  gap: 2rem; /* 32px */
+}
+.#{$util-prefix}gap-x-8 {
+  column-gap: 2rem; /* 32px */
+}
+.#{$util-prefix}gap-y-8 {
+  row-gap: 2rem; /* 32px */
+}
+.#{$util-prefix}gap-9 {
+  gap: 2.25rem; /* 36px */
+}
+.#{$util-prefix}gap-x-9 {
+  column-gap: 2.25rem; /* 36px */
+}
+.#{$util-prefix}gap-y-9 {
+  row-gap: 2.25rem; /* 36px */
+}
+.#{$util-prefix}gap-10 {
+  gap: 2.5rem; /* 40px */
+}
+.#{$util-prefix}gap-x-10 {
+  column-gap: 2.5rem; /* 40px */
+}
+.#{$util-prefix}gap-y-10 {
+  row-gap: 2.5rem; /* 40px */
+}
+.#{$util-prefix}gap-11 {
+  gap: 2.75rem; /* 44px */
+}
+.#{$util-prefix}gap-x-11 {
+  column-gap: 2.75rem; /* 44px */
+}
+.#{$util-prefix}gap-y-11 {
+  row-gap: 2.75rem; /* 44px */
+}
+.#{$util-prefix}gap-12 {
+  gap: 3rem; /* 48px */
+}
+.#{$util-prefix}gap-x-12 {
+  column-gap: 3rem; /* 48px */
+}
+.#{$util-prefix}gap-y-12 {
+  row-gap: 3rem; /* 48px */
+}
+.#{$util-prefix}gap-14 {
+  gap: 3.5rem; /* 56px */
+}
+.#{$util-prefix}gap-x-14 {
+  column-gap: 3.5rem; /* 56px */
+}
+.#{$util-prefix}gap-y-14 {
+  row-gap: 3.5rem; /* 56px */
+}
+.#{$util-prefix}gap-16 {
+  gap: 4rem; /* 64px */
+}
+.#{$util-prefix}gap-x-16 {
+  column-gap: 4rem; /* 64px */
+}
+.#{$util-prefix}gap-y-16 {
+  row-gap: 4rem; /* 64px */
+}
+.#{$util-prefix}gap-20 {
+  gap: 5rem; /* 80px */
+}
+.#{$util-prefix}gap-x-20 {
+  column-gap: 5rem; /* 80px */
+}
+.#{$util-prefix}gap-y-20 {
+  row-gap: 5rem; /* 80px */
+}
+.#{$util-prefix}gap-24 {
+  gap: 6rem; /* 96px */
+}
+.#{$util-prefix}gap-x-24 {
+  column-gap: 6rem; /* 96px */
+}
+.#{$util-prefix}gap-y-24 {
+  row-gap: 6rem; /* 96px */
+}
+.#{$util-prefix}gap-28 {
+  gap: 7rem; /* 112px */
+}
+.#{$util-prefix}gap-x-28 {
+  column-gap: 7rem; /* 112px */
+}
+.#{$util-prefix}gap-y-28 {
+  row-gap: 7rem; /* 112px */
+}
+.#{$util-prefix}gap-32 {
+  gap: 8rem; /* 128px */
+}
+.#{$util-prefix}gap-x-32 {
+  column-gap: 8rem; /* 128px */
+}
+.#{$util-prefix}gap-y-32 {
+  row-gap: 8rem; /* 128px */
+}
+.#{$util-prefix}gap-36 {
+  gap: 9rem; /* 144px */
+}
+.#{$util-prefix}gap-x-36 {
+  column-gap: 9rem; /* 144px */
+}
+.#{$util-prefix}gap-y-36 {
+  row-gap: 9rem; /* 144px */
+}
+.#{$util-prefix}gap-40 {
+  gap: 10rem; /* 160px */
+}
+.#{$util-prefix}gap-x-40 {
+  column-gap: 10rem; /* 160px */
+}
+.#{$util-prefix}gap-y-40 {
+  row-gap: 10rem; /* 160px */
+}
+.#{$util-prefix}gap-44 {
+  gap: 11rem; /* 176px */
+}
+.#{$util-prefix}gap-x-44 {
+  column-gap: 11rem; /* 176px */
+}
+.#{$util-prefix}gap-y-44 {
+  row-gap: 11rem; /* 176px */
+}
+.#{$util-prefix}gap-48 {
+  gap: 12rem; /* 192px */
+}
+.#{$util-prefix}gap-x-48 {
+  column-gap: 12rem; /* 192px */
+}
+.#{$util-prefix}gap-y-48 {
+  row-gap: 12rem; /* 192px */
+}
+.#{$util-prefix}gap-52 {
+  gap: 13rem; /* 208px */
+}
+.#{$util-prefix}gap-x-52 {
+  column-gap: 13rem; /* 208px */
+}
+.#{$util-prefix}gap-y-52 {
+  row-gap: 13rem; /* 208px */
+}
+.#{$util-prefix}gap-56 {
+  gap: 14rem; /* 224px */
+}
+.#{$util-prefix}gap-x-56 {
+  column-gap: 14rem; /* 224px */
+}
+.#{$util-prefix}gap-y-56 {
+  row-gap: 14rem; /* 224px */
+}
+.#{$util-prefix}gap-60 {
+  gap: 15rem; /* 240px */
+}
+.#{$util-prefix}gap-x-60 {
+  column-gap: 15rem; /* 240px */
+}
+.#{$util-prefix}gap-y-60 {
+  row-gap: 15rem; /* 240px */
+}
+.#{$util-prefix}gap-64 {
+  gap: 16rem; /* 256px */
+}
+.#{$util-prefix}gap-x-64 {
+  column-gap: 16rem; /* 256px */
+}
+.#{$util-prefix}gap-y-64 {
+  row-gap: 16rem; /* 256px */
+}
+.#{$util-prefix}gap-72 {
+  gap: 18rem; /* 288px */
+}
+.#{$util-prefix}gap-x-72 {
+  column-gap: 18rem; /* 288px */
+}
+.#{$util-prefix}gap-y-72 {
+  row-gap: 18rem; /* 288px */
+}