.fizz-stack-0 {
  margin-bottom: 0;
}
.fizz-stack-4 {
  margin-bottom: $spacing-4;
}
.fizz-stack-8 {
  margin-bottom: $spacing-8;
}
.fizz-stack-12 {
  margin-bottom: $spacing-12;
}
.fizz-stack-16 {
  margin-bottom: $spacing-16;
}
.fizz-stack-24 {
  margin-bottom: $spacing-24;
}
.fizz-stack-32 {
  margin-bottom: $spacing-32;
}
.fizz-stack-48 {
  margin-bottom: $spacing-48;
}
.fizz-stack-64 {
  margin-bottom: $spacing-64;
}

.fizz-inline-0 {
  margin-right: 0;
}
.fizz-inline-4 {
  margin-right: $spacing-4;
}
.fizz-inline-8 {
  margin-right: $spacing-8;
}
.fizz-inline-12 {
  margin-right: $spacing-12;
}
.fizz-inline-16 {
  margin-right: $spacing-16;
}

.fizz-inset-none {
  padding: 0;
}
.fizz-inset-square-4 {
  padding: $spacing-4;
}
.fizz-inset-square-8 {
  padding: $spacing-8;
}
.fizz-inset-square-12 {
  padding: $spacing-12;
}
.fizz-inset-square-16 {
  padding: $spacing-16;
}
.fizz-inset-square-24 {
  padding: $spacing-24;
}
.fizz-inset-square-32 {
  padding: $spacing-32;
}

.fizz-inset-vertical-8 {
  padding-top: $spacing-8;
  padding-bottom: $spacing-8;
}
.fizz-inset-vertical-12 {
  padding-top: $spacing-12;
  padding-bottom: $spacing-12;
}
.fizz-inset-vertical-16 {
  padding-top: $spacing-16;
  padding-bottom: $spacing-16;
}
.fizz-inset-vertical-24 {
  padding-top: $spacing-24;
  padding-bottom: $spacing-24;
}
.fizz-inset-vertical-32 {
  padding-top: $spacing-32;
  padding-bottom: $spacing-32;
}
.fizz-inset-vertical-48 {
  padding-top: $spacing-48;
  padding-bottom: $spacing-48;
}

.fizz-inset-horizontal-8 {
  padding-left: $spacing-8;
  padding-right: $spacing-8;
}
.fizz-inset-horizontal-12 {
  padding-left: $spacing-12;
  padding-right: $spacing-12;
}
.fizz-inset-horizontal-16 {
  padding-left: $spacing-16;
  padding-right: $spacing-16;
}
.fizz-inset-horizontal-24 {
  padding-left: $spacing-24;
  padding-right: $spacing-24;
}
.fizz-inset-horizontal-32 {
  padding-left: $spacing-32;
  padding-right: $spacing-32;
}
.fizz-inset-horizontal-48 {
  padding-left: $spacing-48;
  padding-right: $spacing-48;
}


.fizz-inset-squish-12 {
  padding: $spacing-4 $spacing-12;
}
.fizz-inset-squish-16 {
  padding: $spacing-8 $spacing-16;
}
.fizz-inset-squish-24 {
  padding: $spacing-16 $spacing-24;
}
.fizz-inset-squish-32 {
  padding: $spacing-8 $spacing-32;
}
.fizz-inset-squish-64 {
  padding: $spacing-48 $spacing-64;
}
.fizz-inset-squish-96 {
  padding: $spacing-48 $spacing-96;
}

.fizz-inset-stretch-24 {
  padding: $spacing-24 $spacing-16;
}
.fizz-inset-stretch-32 {
  padding: $spacing-32 $spacing-16;
}

.fizz-flow-4 > :not(:last-child):not([class*="fizz-stack"]) {
  margin-bottom: $spacing-4;
}

.fizz-flow-8 > :not(:last-child):not([class*="fizz-stack"]) {
  margin-bottom: $spacing-8;
}

.fizz-flow-12 > :not(:last-child):not([class*="fizz-stack"]) {
  margin-bottom: $spacing-12;
}

.fizz-flow-16 > :not(:last-child):not([class*="fizz-stack"]) {
  margin-bottom: $spacing-16;
}

.fizz-flow-24 > :not(:last-child):not([class*="fizz-stack"]) {
  margin-bottom: $spacing-24;
}

.fizz-flow-32 > :not(:last-child):not([class*="fizz-stack"]) {
  margin-bottom: $spacing-32;
}

.fizz-flow-48 > :not(:last-child):not([class*="fizz-stack"]) {
  margin-bottom: $spacing-48;
}

.fizz-full-width {
  width: 100%;
}

.fizz-half-width {
  width: 50%;
}

.fizz-third-width {
  width: 33%;
}

.fizz-quarter-width {
  width: 25%;
}

.fizz-fifth-width {
  width: 20%;
}

.fizz-max-content {
  width: max-content;
}

.fizz-no-min-width {
  min-width: 0;
}

.fizz-expand-12 {
  margin-left: -#{$spacing-12};
  margin-right: -#{$spacing-12};
}

.fizz-expand-16 {
  margin-left: -#{$spacing-16};
  margin-right: -#{$spacing-16};
}

@media (max-width: $breakpoint-m) {
  .fizz-expand-16-on-small {
    width: calc(100% + (#{$spacing-16} * 2));
    margin-left: -#{$spacing-16};
  }

  .fizz-expand-24-on-small {
    width: calc(100% + (#{$spacing-24} * 2));
    margin-left: -#{$spacing-24};
  }
}

@media (min-width: $breakpoint-m) {
  .fizz-full-width {
    --max-width: none;
    max-width: var(--max-width);
  }

  .fizz-expand-32-on-large {
    width: calc(100% + (#{$spacing-32} * 2));
    margin-left: -#{$spacing-32};
  }
}