[class*="fizz-flex-row"],
[class*="fizz-space-between"] {
  display: flex;
  align-items: center;
}

[class*="fizz-space-between"] {
  justify-content: space-between;
}

[class*="-responsive"] {
  flex-direction: column;
  align-items: stretch;
}

.fizz-flex-row-inline {
  display: inline-flex;
}

.fizz-flex-wrap {
  flex-wrap: wrap;
}

.fizz-flex-wrap {
  --gap: 1rem;
  gap: var(--gap);
  > :not(:last-child):not([class*="fizz-inline"]) {
    margin-right: 0;
  }
}

.fizz-flex-row > :not(:last-child):not([class*="fizz-inline"]),
.fizz-flex-row-inline > :not(:last-child):not([class*="fizz-inline"]),
.fizz-space-between > :not(:last-child):not([class*="fizz-inline"]) {
  margin-right: $gutter-medium;
}
.fizz-flex-row-0 > :not(:last-child):not([class*="fizz-inline"]),
.fizz-flex-row-inline-0 > :not(:last-child):not([class*="fizz-inline"]),.fizz-space-between-0 > :not(:last-child):not([class*="fizz-inline"]) {
  margin-right: 0;
}
.fizz-flex-row-4 > :not(:last-child):not([class*="fizz-inline"]),
.fizz-flex-row-inline-4 > :not(:last-child):not([class*="fizz-inline"]),.fizz-space-between-4 > :not(:last-child):not([class*="fizz-inline"]) {
  margin-right: $spacing-4;
}
.fizz-flex-row-8 > :not(:last-child):not([class*="fizz-inline"]),
.fizz-flex-row-inline-8 > :not(:last-child):not([class*="fizz-inline"]),
.fizz-space-between-8 > :not(:last-child):not([class*="fizz-inline"]) {
  margin-right: $spacing-8;
}
.fizz-flex-row-12 > :not(:last-child):not([class*="fizz-inline"]),
.fizz-flex-row-inline-12 > :not(:last-child):not([class*="fizz-inline"]),
.fizz-space-between-12 > :not(:last-child):not([class*="fizz-inline"]) {
  margin-right: $spacing-12;
}
.fizz-flex-row-24 > :not(:last-child):not([class*="fizz-inline"]),
.fizz-flex-row-inline-24 > :not(:last-child):not([class*="fizz-inline"]),
.fizz-space-between-24 > :not(:last-child):not([class*="fizz-inline"]) {
  margin-right: $spacing-24;
}
.fizz-flex-row-32 > :not(:last-child):not([class*="fizz-inline"]),
.fizz-flex-row-inline-32 > :not(:last-child):not([class*="fizz-inline"]),
.fizz-space-between-32 > :not(:last-child):not([class*="fizz-inline"]) {
  margin-right: $spacing-32;
}

.fizz-flex-row-responsive > :not(:last-child):not([class*="fizz-stack"]),
.fizz-space-between-responsive > :not(:last-child):not([class*="fizz-stack"]) {
  margin-bottom: $gutter-medium;
}
[class*="-0-responsive"] > :not(:last-child):not([class*="fizz-stack"]) {
  margin-bottom: 0;
}
[class*="-4-responsive"] > :not(:last-child):not([class*="fizz-stack"]) {
  margin-bottom: $spacing-4;
}
[class*="-8-responsive"] > :not(:last-child):not([class*="fizz-stack"]) {
  margin-bottom: $spacing-8;
}
[class*="-12-responsive"] > :not(:last-child):not([class*="fizz-stack"]) {
  margin-bottom: $spacing-12;
}
[class*="-24-responsive"] > :not(:last-child):not([class*="fizz-stack"]) {
  margin-bottom: $spacing-24;
}
[class*="-32-responsive"] > :not(:last-child):not([class*="fizz-stack"]) {
  margin-bottom: $spacing-32;
}

.fizz-flex-item {
  flex: 1;
}

.fizz-flex-no-shrink {
  flex-shrink: 0;
}

.fizz-flex-reverse {
  flex-direction: row-reverse;
}

.fizz-justify-center {
  justify-content: center;
}

.fizz-justify-end {
  justify-content: flex-end;
}

.fizz-align-self-start {
  align-self: start;
}

.fizz-align-self-end {
  align-self: end;
}

.fizz-align-self-center {
  align-self: center;
}

.fizz-align-self-stretch {
  align-self: stretch;
}

[class*="fizz-flex-row"].fizz-align-stretch,
[class*="fizz-space-between"].fizz-align-stretch {
  align-items: stretch;
}

[class*="fizz-flex-row"].fizz-align-content-start,
[class*="fizz-space-between"].fizz-align-content-start {
  align-items: flex-start;
}

[class*="fizz-flex-row"].fizz-align-content-end,
[class*="fizz-space-between"].fizz-align-content-end {
  align-items: flex-end;
}

[class*="fizz-flex-row"].fizz-align-content-baseline,
[class*="fizz-space-between"].fizz-align-content-baseline {
  align-items: baseline;
}

[class*="fizz-flex-row"].fizz-align-content-stretch,
[class*="fizz-space-between"].fizz-align-content-stretch {
  align-items: stretch;
}

@media (min-width: $breakpoint-m) {

  [class*="fizz-flex-row"],
  [class*="fizz-space-between"] {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  [class*="fizz-flex-vertical"] {
    flex-direction: column;
    align-items: flex-start;
  }

  .fizz-flex-row-inline {
    display: inline-flex;
  }

  .fizz-flex-row-responsive > :not(:last-child):not([class*="fizz-stack"]),
  .fizz-space-between-responsive > :not(:last-child):not([class*="fizz-stack"]) {
    margin-bottom: 0;
    margin-right: $gutter-medium; 
  }

  [class*="-4-responsive"] > :not(:last-child):not([class*="fizz-stack"]) {
    margin-bottom: 0;
    margin-right: $spacing-4;
  }
  [class*="-8-responsive"] > :not(:last-child):not([class*="fizz-stack"]) {
    margin-bottom: 0;
    margin-right: $spacing-8;
  }
  [class*="-24-responsive"] > :not(:last-child):not([class*="fizz-stack"]) {
    margin-bottom: 0;
    margin-right: $spacing-24;
  }
  [class*="-32-responsive"] > :not(:last-child):not([class*="fizz-stack"]) {
    margin-bottom: 0;
    margin-right: $spacing-32;
  }
}

.fizz-flex-multirow {
  --gap-small: $spacing-16;
  --gap-large: $spacing-16; // $spacing-16 $spacing-48;
  --max-width-small: 100px; // 96px
  --max-width-large: 100px; // 140px
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-small);
  > * {
    max-width: var(--max-width-small);
  }
}

@media (min-width: $breakpoint-m) {
  .fizz-flex-multirow {
    gap: var(--gap-large);
    > * {
      max-width: var(--max-width-large);
    }
  }
}