@mixin stack-spacing($spacing: $spacing-md) {
  margin-left: -1 * $spacing;
  margin-top: -1 * $spacing;

  > * {
    margin-left: $spacing;
    margin-top: $spacing;
    max-width: 100%;
  }
}


.stack {
  display: block;

  .stack__wrapper {
    @include stack-spacing(gutter('sm'));
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;

    > * {
      flex: 0 0 auto;
      min-width: 0;
    }

    &.stack--spacing-none {
      @include stack-spacing(0);
    }

    &.stack--spacing-tight {
      @include stack-spacing(gutter('xs'));
    }

    &.stack--spacing-loose {
      @include stack-spacing($spacing-md);
    }

    &.stack--distribution-leading {
      justify-content: flex-start;
    }

    &.stack--distribution-trailing {
      justify-content: flex-end;
    }

    &.stack--distribution-center {
      justify-content: center;
    }

    &.stack--distribution-equalSpacing {
      justify-content: space-between;
    }

    &.stack--distribution-fill > * {
      flex: 1 1 auto;
    }

    &.stack--distribution-fillEvenly > * {
      flex: 1 1 auto;

      @supports (min-width: fit-content) {
        flex: 1 0 0%;
        min-width: fit-content;
      }
    }

    &.stack--alignment-leading {
      align-items: flex-start;
    }

    &.stack--alignment-trailing {
      align-items: flex-end;
    }

    &.stack--alignment-center {
      align-items: center;
    }

    &.stack--alignment-fill {
      align-items: stretch;
    }

    &.stack--alignment-baseline {
      align-items: baseline;
    }

    &.stack--vertical {
      flex-direction: column;
      margin-left: 0;
      height: 100%;

      > * {
        margin-left: 0;
      }
    }

    &.stack--no-wrap {
      flex-wrap: nowrap;
    }

    .stack__item--fill {
      flex: 1 1 auto;
    }
  }
}