@use 'ui-design-system/src/styles/semantic/index' as *;

.ui-vstack {
  display: flex;
  flex-direction: column;
  position: relative;
  
  // Inline variant
  &--inline {
    display: inline-flex;
  }
  
  // Full width/height variants
  &--full-width {
    width: 100%;
  }
  
  &--full-height {
    height: 100%;
  }
  
  // Spacing variants - using semantic stack spacing tokens
  &--spacing-xs {
    gap: $semantic-spacing-stack-xs;
  }
  
  &--spacing-sm {
    gap: $semantic-spacing-stack-sm;
  }
  
  &--spacing-md {
    gap: $semantic-spacing-stack-md;
  }
  
  &--spacing-lg {
    gap: $semantic-spacing-stack-lg;
  }
  
  &--spacing-xl {
    gap: $semantic-spacing-stack-xl;
  }
  
  &--spacing-2xl {
    gap: $semantic-spacing-2xl;
  }
  
  &--spacing-3xl {
    gap: $semantic-spacing-3xl;
  }
  
  &--spacing-4xl {
    gap: $semantic-spacing-4xl;
  }
  
  &--spacing-5xl {
    gap: $semantic-spacing-5xl;
  }
  
  // Horizontal alignment (cross-axis for column)
  &--align-start {
    align-items: flex-start;
  }
  
  &--align-center {
    align-items: center;
  }
  
  &--align-end {
    align-items: flex-end;
  }
  
  &--align-stretch {
    align-items: stretch;
  }
  
  // Vertical justify (main-axis for column)
  &--justify-start {
    justify-content: flex-start;
  }
  
  &--justify-center {
    justify-content: center;
  }
  
  &--justify-end {
    justify-content: flex-end;
  }
  
  &--justify-between {
    justify-content: space-between;
  }
  
  &--justify-around {
    justify-content: space-around;
  }
  
  &--justify-evenly {
    justify-content: space-evenly;
  }
  
  // Divider variant - adds horizontal borders between children
  &--divider {
    > :not(:last-child) {
      border-bottom: $semantic-border-width-1 solid $semantic-color-border-secondary;
      padding-bottom: $semantic-spacing-component-sm;
      margin-bottom: $semantic-spacing-component-sm;
    }
    
    // Remove gap when using dividers to avoid double spacing
    gap: 0;
  }
  
  // Responsive behavior
  &--responsive {
    @media (max-width: 640px) {
      // Reduce spacing on small screens
      &.ui-vstack--spacing-xl,
      &.ui-vstack--spacing-2xl,
      &.ui-vstack--spacing-3xl,
      &.ui-vstack--spacing-4xl,
      &.ui-vstack--spacing-5xl {
        gap: $semantic-spacing-stack-lg;
      }
    }
    
    @media (max-width: 480px) {
      &.ui-vstack--spacing-lg,
      &.ui-vstack--spacing-xl,
      &.ui-vstack--spacing-2xl,
      &.ui-vstack--spacing-3xl,
      &.ui-vstack--spacing-4xl,
      &.ui-vstack--spacing-5xl {
        gap: $semantic-spacing-stack-md;
      }
    }
  }
}