@use "../layout/breakpoints" as *;

@layer helpers {
  // scss-docs-start stacks
  .stack-container {
    @include set-container();
  }

  [class*="hstack"],
  [class*="vstack"] {
    display: flex;
    flex: var(--stack-flex, 1 1 auto);
    flex-direction: var(--stack-direction, row);
    align-items: var(--stack-align-items, center);
    align-self: var(--stack-align-self, stretch);
  }

  @include loop-breakpoints-up() using ($breakpoint, $prefix) {
    .#{$prefix}vstack {
      @include container-breakpoint-up($breakpoint) {
        --stack-direction: column;
        --stack-align-items: stretch;
      }
    }
    .#{$prefix}hstack {
      @include container-breakpoint-up($breakpoint) {
        --stack-direction: row;
        --stack-align-items: flex-start;
      }
    }
  }
  // scss-docs-end stacks
}