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

.ui-hstack {
  display: flex;
  flex-direction: row;
  position: relative;
  
  // Inline variant
  &--inline {
    display: inline-flex;
  }
  
  // Full width variant
  &--full-width {
    width: 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;
  }
  
  // Vertical alignment (cross-axis for row)
  &--align-start {
    align-items: flex-start;
  }
  
  &--align-center {
    align-items: center;
  }
  
  &--align-end {
    align-items: flex-end;
  }
  
  &--align-stretch {
    align-items: stretch;
  }
  
  &--align-baseline {
    align-items: baseline;
  }
  
  // Horizontal justify (main-axis for row)
  &--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;
  }
  
  // Wrap variants
  &--wrap-wrap {
    flex-wrap: wrap;
  }
  
  &--wrap-nowrap {
    flex-wrap: nowrap;
  }
  
  &--wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  
  // Divider variant - adds vertical borders between children
  &--divider {
    > :not(:last-child) {
      border-right: $semantic-border-width-1 solid $semantic-color-border-secondary;
      padding-right: $semantic-spacing-component-sm;
      margin-right: $semantic-spacing-component-sm;
    }
    
    // Remove gap when using dividers to avoid double spacing
    gap: 0;
  }
  
  // Responsive behavior
  &--responsive {
    @media (max-width: 640px) {
      // Convert to vertical stack on small screens for better usability
      flex-direction: column;
      
      // Adjust dividers for responsive layout
      &.ui-hstack--divider {
        > :not(:last-child) {
          border-right: none;
          border-bottom: $semantic-border-width-1 solid $semantic-color-border-secondary;
          padding-right: 0;
          margin-right: 0;
          padding-bottom: $semantic-spacing-component-sm;
          margin-bottom: $semantic-spacing-component-sm;
        }
      }
      
      // Reduce spacing on small screens
      &.ui-hstack--spacing-xl,
      &.ui-hstack--spacing-2xl,
      &.ui-hstack--spacing-3xl,
      &.ui-hstack--spacing-4xl,
      &.ui-hstack--spacing-5xl {
        gap: $semantic-spacing-stack-lg;
      }
    }
    
    @media (max-width: 480px) {
      &.ui-hstack--spacing-lg,
      &.ui-hstack--spacing-xl,
      &.ui-hstack--spacing-2xl,
      &.ui-hstack--spacing-3xl,
      &.ui-hstack--spacing-4xl,
      &.ui-hstack--spacing-5xl {
        gap: $semantic-spacing-stack-md;
      }
    }
  }
}