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

.ui-column {
  // Core column container
  box-sizing: border-box;
  
  // Column count variants
  &--count-1 {
    column-count: 1;
  }
  
  &--count-2 {
    column-count: 2;
  }
  
  &--count-3 {
    column-count: 3;
  }
  
  &--count-4 {
    column-count: 4;
  }
  
  &--count-5 {
    column-count: 5;
  }
  
  &--count-6 {
    column-count: 6;
  }
  
  &--count-auto {
    column-count: auto;
  }
  
  // Gap variants using semantic spacing tokens
  &--gap-xs {
    column-gap: $semantic-spacing-component-xs;
  }
  
  &--gap-sm {
    column-gap: $semantic-spacing-component-sm;
  }
  
  &--gap-md {
    column-gap: $semantic-spacing-component-md;
  }
  
  &--gap-lg {
    column-gap: $semantic-spacing-component-lg;
  }
  
  &--gap-xl {
    column-gap: $semantic-spacing-component-xl;
  }
  
  // Column fill variants
  &--fill-auto {
    column-fill: auto;
  }
  
  &--fill-balance {
    column-fill: balance;
  }
  
  &--fill-balance-all {
    column-fill: balance-all;
  }
  
  // Column rule variants
  &--rule-solid {
    column-rule-style: solid;
    column-rule-color: $semantic-color-border-secondary;
  }
  
  &--rule-dashed {
    column-rule-style: dashed;
    column-rule-color: $semantic-color-border-secondary;
  }
  
  &--rule-dotted {
    column-rule-style: dotted;
    column-rule-color: $semantic-color-border-secondary;
  }
  
  // Rule width variants
  &--rule-width-1 {
    column-rule-width: $semantic-border-width-1;
  }
  
  &--rule-width-2 {
    column-rule-width: $semantic-border-width-2;
  }
  
  &--rule-width-3 {
    column-rule-width: 3px; // No semantic token for 3px, using fallback
  }
  
  // Column span control
  &--span-all {
    * {
      column-span: all;
    }
  }
  
  // Size variants
  &--full-width {
    width: 100%;
  }
  
  &--full-height {
    height: 100%;
  }
  
  // Responsive behavior
  &--responsive {
    // Single column on small screens
    @media (max-width: calc(768px - 1px)) {
      column-count: 1 !important;
    }
    
    // Reduce column count on medium screens
    @media (max-width: calc(1024px - 1px)) and (min-width: 768px) {
      &.ui-column--count-6 {
        column-count: 3;
      }
      
      &.ui-column--count-5 {
        column-count: 3;
      }
      
      &.ui-column--count-4 {
        column-count: 2;
      }
    }
  }
  
  // Prevent orphans and widows for better text flow
  p, li, div {
    break-inside: avoid-column;
    page-break-inside: avoid;
  }
  
  // Headings should not be orphaned
  h1, h2, h3, h4, h5, h6 {
    break-after: avoid-column;
    page-break-after: avoid;
  }
}