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

.ui-grid-system {
  display: grid;
  position: relative;
  width: 100%;
  
  // Base grid layout
  gap: tokens.$semantic-spacing-grid-gap-md;
  
  // Size variants
  &--gap-xs {
    gap: tokens.$semantic-spacing-grid-gap-xs;
  }
  
  &--gap-sm {
    gap: tokens.$semantic-spacing-grid-gap-sm;
  }
  
  &--gap-md {
    gap: tokens.$semantic-spacing-grid-gap-md;
  }
  
  &--gap-lg {
    gap: tokens.$semantic-spacing-grid-gap-lg;
  }
  
  &--gap-xl {
    gap: tokens.$semantic-spacing-grid-gap-xl;
  }
  
  // Column variants
  &--cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  
  &--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  &--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  &--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  &--cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  
  &--cols-12 {
    grid-template-columns: repeat(12, 1fr);
  }
  
  // Auto-fill responsive columns
  &--auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  
  &--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  // Row gap variants
  &--row-gap-xs {
    row-gap: tokens.$semantic-spacing-grid-gap-xs;
  }
  
  &--row-gap-sm {
    row-gap: tokens.$semantic-spacing-grid-gap-sm;
  }
  
  &--row-gap-md {
    row-gap: tokens.$semantic-spacing-grid-gap-md;
  }
  
  &--row-gap-lg {
    row-gap: tokens.$semantic-spacing-grid-gap-lg;
  }
  
  &--row-gap-xl {
    row-gap: tokens.$semantic-spacing-grid-gap-xl;
  }
  
  // Column gap variants
  &--column-gap-xs {
    column-gap: tokens.$semantic-spacing-grid-gap-xs;
  }
  
  &--column-gap-sm {
    column-gap: tokens.$semantic-spacing-grid-gap-sm;
  }
  
  &--column-gap-md {
    column-gap: tokens.$semantic-spacing-grid-gap-md;
  }
  
  &--column-gap-lg {
    column-gap: tokens.$semantic-spacing-grid-gap-lg;
  }
  
  &--column-gap-xl {
    column-gap: tokens.$semantic-spacing-grid-gap-xl;
  }
  
  // Alignment variants
  &--justify-start {
    justify-items: start;
  }
  
  &--justify-end {
    justify-items: end;
  }
  
  &--justify-center {
    justify-items: center;
  }
  
  &--justify-stretch {
    justify-items: stretch;
  }
  
  &--align-start {
    align-items: start;
  }
  
  &--align-end {
    align-items: end;
  }
  
  &--align-center {
    align-items: center;
  }
  
  &--align-stretch {
    align-items: stretch;
  }
  
  // Content alignment
  &--justify-content-start {
    justify-content: start;
  }
  
  &--justify-content-end {
    justify-content: end;
  }
  
  &--justify-content-center {
    justify-content: center;
  }
  
  &--justify-content-stretch {
    justify-content: stretch;
  }
  
  &--justify-content-space-around {
    justify-content: space-around;
  }
  
  &--justify-content-space-between {
    justify-content: space-between;
  }
  
  &--justify-content-space-evenly {
    justify-content: space-evenly;
  }
  
  &--align-content-start {
    align-content: start;
  }
  
  &--align-content-end {
    align-content: end;
  }
  
  &--align-content-center {
    align-content: center;
  }
  
  &--align-content-stretch {
    align-content: stretch;
  }
  
  &--align-content-space-around {
    align-content: space-around;
  }
  
  &--align-content-space-between {
    align-content: space-between;
  }
  
  &--align-content-space-evenly {
    align-content: space-evenly;
  }
  
  // Dense packing
  &--auto-rows-min {
    grid-auto-rows: min-content;
  }
  
  &--auto-rows-max {
    grid-auto-rows: max-content;
  }
  
  &--auto-rows-fr {
    grid-auto-rows: 1fr;
  }
  
  &--dense {
    grid-auto-flow: dense;
  }
  
  // Responsive behavior
  @media (max-width: 768px) {
    &--responsive {
      grid-template-columns: 1fr;
      gap: tokens.$semantic-spacing-grid-gap-sm;
    }
    
    &--cols-12,
    &--cols-6,
    &--cols-4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 480px) {
    &--responsive {
      gap: tokens.$semantic-spacing-grid-gap-xs;
    }
    
    &--cols-12,
    &--cols-6,
    &--cols-4,
    &--cols-3,
    &--cols-2 {
      grid-template-columns: 1fr;
    }
  }
}