.stack {
  --alignItems: start;
  --gap: var(--gap--lg);
  --justifyContent: start;
  --maxWidth: min-content;
  --paddingBottom: 0px;
  --paddingLeft: 0px;
  --paddingRight: 0px;
  --paddingTop: 0px;

  display: flex;
  flex-direction: var(--flexDirection);
  flex-grow: var(--flexGrow);
  flex-shrink: var(--flexShrink);
  flex-wrap: var(--flexWrap);
  gap: var(--gap);
  align-items: var(--alignItems);
  justify-content: var(--justifyContent);

  width: min(var(--maxWidth), calc(100% - var(--paddingLeft) - var(--paddingRight)));
  padding: var(--paddingTop) var(--paddingRight) var(--paddingBottom) var(--paddingLeft);

  &--alignItemsStart {
    --alignItems: start;
  }

  &--alignItemsCenter {
    --alignItems: center;
  }

  &--alignItemsEnd {
    --alignItems: end;
  }

  &--alignItemsStretch {
    --alignItems: stretch;
  }

  &--flexDirectionColumn {
    --flexDirection: column;
  }

  &--flexDirectionColumnReverse {
    --flexDirection: column-reverse;
  }

  &--flexDirectionRow {
    --flexDirection: row;
  }

  &--flexDirectionRowReverse {
    --flexDirection: row-reverse;
  }

  &--justifyContentStart {
    --justifyContent: start;
  }

  &--justifyContentCenter {
    --justifyContent: center;
  }

  &--justifyContentEnd {
    --justifyContent: end;
  }

  &--justifyContentSpaceBetween {
    --justifyContent: space-between;
  }

  &--justifyContentSpaceAround {
    --justifyContent: space-around;
  }

  &--justifyContentSpaceEvenly {
    --justifyContent: space-evenly;
  }

  &--noGap {
    --gap: 0px;
  }

  &--gap4xl {
    --gap: var(--gap--4xl);
  }

  &--gap3xl {
    --gap: var(--gap--3xl);
  }

  &--gapXxl {
    --gap: var(--gap--2xl);
  }

  &--gapXl {
    --gap: var(--gap--xl);
  }

  &--gap,
  &--gapLg {
    --gap: var(--gap--lg);
  }

  &--gapMd {
    --gap: var(--gap--md);
  }

  &--gapSm {
    --gap: var(--gap--sm);
  }

  &--gapXs {
    --gap: var(--gap--xs);
  }

  &--gapXxs {
    --gap: var(--gap--xxs);
  }

  &--grow {
    --flexGrow: 1;
  }

  &--noGrow {
    --flexGrow: 0;
  }

  &--maxWidthFit,
  &--maxWidthMedium,
  &--maxWidthLarge {
    margin-right: auto;
    margin-left: auto;
  }

  &--maxWidthLarge {
    --maxWidth: 1150px;
  }

  &--maxWidthMedium {
    --maxWidth: 826px;
  }

  &--noPadding {
    --paddingBottom: 0px;
    --paddingLeft: 0px;
    --paddingRight: 0px;
    --paddingTop: 0px;
  }

  &--padding {
    --paddingBottom: var(--padding--xl);
    --paddingLeft: var(--padding--xl);
    --paddingRight: var(--padding--xl);
    --paddingTop: var(--padding--xl);
  }

  &--paddingVertical {
    --paddingBottom: var(--padding--xl);
    --paddingTop: var(--padding--xl);
  }

  &--paddingHorizontal {
    --paddingLeft: var(--padding--xl);
    --paddingRight: var(--padding--xl);
  }

  &--shrink {
    --flexShrink: 1;
  }

  &--noShrink {
    --flexShrink: 0;
  }

  &--wrap {
    --flexWrap: wrap;
  }

  &--noWrap {
    --flexWrap: nowrap;
  }

  // TODO: https://github.com/shoptet/cms4/issues/10138
  & > .v2form,
  & > .typography,
  & > .systemMessage,
  & > .tableWrapper > .table {
    margin-top: unset;
    margin-bottom: unset;
  }
}