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

.ui-grid-container {
  // Core Structure
  display: grid;
  position: relative;
  width: 100%;
  
  // Layout & Spacing
  gap: $semantic-spacing-grid-gap-md;
  padding: $semantic-spacing-component-md;
  
  // Visual Design
  background: $semantic-color-surface-primary;
  border-radius: $semantic-border-card-radius;
  
  // Sizing Variants
  &--gap-sm {
    gap: $semantic-spacing-grid-gap-sm;
  }
  
  &--gap-md {
    gap: $semantic-spacing-grid-gap-md;
  }
  
  &--gap-lg {
    gap: $semantic-spacing-grid-gap-lg;
  }
  
  // Padding Variants
  &--padding-none {
    padding: 0;
  }
  
  &--padding-sm {
    padding: $semantic-spacing-component-sm;
  }
  
  &--padding-md {
    padding: $semantic-spacing-component-md;
  }
  
  &--padding-lg {
    padding: $semantic-spacing-component-lg;
  }
  
  // Column Variants - Auto Grid
  &--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  &--auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  
  // Responsive Column Templates
  &--cols-1 {
    grid-template-columns: 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-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  
  &--cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  
  // Row Variants
  &--rows-auto {
    grid-auto-rows: auto;
  }
  
  &--rows-equal {
    grid-auto-rows: 1fr;
  }
  
  &--rows-min-content {
    grid-auto-rows: min-content;
  }
  
  &--rows-max-content {
    grid-auto-rows: max-content;
  }
  
  // Dense Grid for Auto Placement
  &--dense {
    grid-auto-flow: dense;
  }
  
  // Alignment Options
  &--justify-start {
    justify-content: start;
  }
  
  &--justify-center {
    justify-content: center;
  }
  
  &--justify-end {
    justify-content: end;
  }
  
  &--justify-space-between {
    justify-content: space-between;
  }
  
  &--justify-space-around {
    justify-content: space-around;
  }
  
  &--justify-space-evenly {
    justify-content: space-evenly;
  }
  
  &--align-start {
    align-content: start;
  }
  
  &--align-center {
    align-content: center;
  }
  
  &--align-end {
    align-content: end;
  }
  
  &--align-space-between {
    align-content: space-between;
  }
  
  &--align-space-around {
    align-content: space-around;
  }
  
  &--align-space-evenly {
    align-content: space-evenly;
  }
  
  // Item Alignment
  &--items-start {
    align-items: start;
  }
  
  &--items-center {
    align-items: center;
  }
  
  &--items-end {
    align-items: end;
  }
  
  &--items-stretch {
    align-items: stretch;
  }
  
  // Responsive Behavior
  @media (max-width: 1024px) {
    &--cols-6 {
      grid-template-columns: repeat(4, 1fr);
    }
    
    &--cols-5 {
      grid-template-columns: repeat(3, 1fr);
    }
    
    &--cols-4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 768px) {
    gap: $semantic-spacing-grid-gap-sm;
    padding: $semantic-spacing-component-sm;
    
    &--cols-6,
    &--cols-5,
    &--cols-4,
    &--cols-3 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 480px) {
    gap: $semantic-spacing-component-xs;
    padding: $semantic-spacing-component-xs;
    
    &--cols-6,
    &--cols-5,
    &--cols-4,
    &--cols-3,
    &--cols-2 {
      grid-template-columns: 1fr;
    }
    
    &--auto-fit,
    &--auto-fill {
      grid-template-columns: 1fr;
    }
  }
}

// Grid Item Utilities
.ui-grid-item {
  // Span Utilities
  &--span-1 {
    grid-column: span 1;
  }
  
  &--span-2 {
    grid-column: span 2;
  }
  
  &--span-3 {
    grid-column: span 3;
  }
  
  &--span-4 {
    grid-column: span 4;
  }
  
  &--span-5 {
    grid-column: span 5;
  }
  
  &--span-6 {
    grid-column: span 6;
  }
  
  &--span-full {
    grid-column: 1 / -1;
  }
  
  // Row Span Utilities
  &--row-span-1 {
    grid-row: span 1;
  }
  
  &--row-span-2 {
    grid-row: span 2;
  }
  
  &--row-span-3 {
    grid-row: span 3;
  }
  
  &--row-span-4 {
    grid-row: span 4;
  }
  
  // Item Alignment
  &--justify-self-start {
    justify-self: start;
  }
  
  &--justify-self-center {
    justify-self: center;
  }
  
  &--justify-self-end {
    justify-self: end;
  }
  
  &--justify-self-stretch {
    justify-self: stretch;
  }
  
  &--align-self-start {
    align-self: start;
  }
  
  &--align-self-center {
    align-self: center;
  }
  
  &--align-self-end {
    align-self: end;
  }
  
  &--align-self-stretch {
    align-self: stretch;
  }
  
  // Responsive Item Spans
  @media (max-width: 768px) {
    &--span-6,
    &--span-5,
    &--span-4,
    &--span-3 {
      grid-column: span 2;
    }
  }
  
  @media (max-width: 480px) {
    &--span-6,
    &--span-5,
    &--span-4,
    &--span-3,
    &--span-2 {
      grid-column: span 1;
    }
  }
}