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

.ui-container {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  
  // Base padding
  padding: 0 $semantic-spacing-component-md;
  
  // Size variants
  &--xs {
    max-width: 475px;
  }
  
  &--sm {
    max-width: 640px;
  }
  
  &--md {
    max-width: 768px;
  }
  
  &--lg {
    max-width: 1024px;
  }
  
  &--xl {
    max-width: 1280px;
  }
  
  &--2xl {
    max-width: 1536px;
  }
  
  &--3xl {
    max-width: 1792px;
  }
  
  &--4xl {
    max-width: 1920px;
  }
  
  &--full {
    max-width: none;
  }
  
  // Padding variants
  &--padding-xs {
    padding-left: $semantic-spacing-component-xs;
    padding-right: $semantic-spacing-component-xs;
  }
  
  &--padding-sm {
    padding-left: $semantic-spacing-component-sm;
    padding-right: $semantic-spacing-component-sm;
  }
  
  &--padding-md {
    padding-left: $semantic-spacing-component-md;
    padding-right: $semantic-spacing-component-md;
  }
  
  &--padding-lg {
    padding-left: $semantic-spacing-component-lg;
    padding-right: $semantic-spacing-component-lg;
  }
  
  &--padding-xl {
    padding-left: $semantic-spacing-component-xl;
    padding-right: $semantic-spacing-component-xl;
  }
  
  &--padding-none {
    padding-left: 0;
    padding-right: 0;
  }
  
  // Vertical padding variants
  &--padding-y-xs {
    padding-top: $semantic-spacing-component-xs;
    padding-bottom: $semantic-spacing-component-xs;
  }
  
  &--padding-y-sm {
    padding-top: $semantic-spacing-component-sm;
    padding-bottom: $semantic-spacing-component-sm;
  }
  
  &--padding-y-md {
    padding-top: $semantic-spacing-component-md;
    padding-bottom: $semantic-spacing-component-md;
  }
  
  &--padding-y-lg {
    padding-top: $semantic-spacing-component-lg;
    padding-bottom: $semantic-spacing-component-lg;
  }
  
  &--padding-y-xl {
    padding-top: $semantic-spacing-component-xl;
    padding-bottom: $semantic-spacing-component-xl;
  }
  
  &--padding-y-none {
    padding-top: 0;
    padding-bottom: 0;
  }
  
  // Background variants
  &--surface {
    background: $semantic-color-surface-primary;
  }
  
  &--surface-secondary {
    background: $semantic-color-surface-secondary;
  }
  
  &--surface-elevated {
    background: $semantic-color-surface-elevated;
  }
  
  &--transparent {
    background: transparent;
  }
  
  // Visual variants
  &--card {
    background: $semantic-color-surface-primary;
    border-radius: $semantic-border-radius-md;
    box-shadow: $semantic-shadow-elevation-1;
    border: 1px solid $semantic-color-border-subtle;
    
    padding: $semantic-spacing-container-card-padding;
    
    &.ui-container--padding-lg {
      padding: $semantic-spacing-container-card-padding-lg;
    }
  }
  
  &--section {
    padding-top: $semantic-spacing-layout-section-sm;
    padding-bottom: $semantic-spacing-layout-section-sm;
  }
  
  &--hero {
    padding-top: $semantic-spacing-layout-section-lg;
    padding-bottom: $semantic-spacing-layout-section-lg;
    text-align: center;
  }
  
  // Flex container variants
  &--flex {
    display: flex;
    flex-direction: column;
    gap: $semantic-spacing-stack-md;
    
    &.ui-container--flex-row {
      flex-direction: row;
    }
    
    &.ui-container--flex-center {
      align-items: center;
      justify-content: center;
    }
    
    &.ui-container--flex-between {
      justify-content: space-between;
    }
    
    &.ui-container--flex-around {
      justify-content: space-around;
    }
    
    &.ui-container--flex-evenly {
      justify-content: space-evenly;
    }
    
    &.ui-container--flex-start {
      align-items: flex-start;
      justify-content: flex-start;
    }
    
    &.ui-container--flex-end {
      align-items: flex-end;
      justify-content: flex-end;
    }
  }
  
  // Grid container variants
  &--grid {
    display: grid;
    gap: $semantic-spacing-grid-gap-md;
    
    &.ui-container--grid-2 {
      grid-template-columns: repeat(2, 1fr);
    }
    
    &.ui-container--grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }
    
    &.ui-container--grid-4 {
      grid-template-columns: repeat(4, 1fr);
    }
    
    &.ui-container--grid-auto {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
  }
  
  // Centered content
  &--centered {
    text-align: center;
    
    &.ui-container--flex {
      align-items: center;
      justify-content: center;
    }
  }
  
  // Responsive behavior
  @media (max-width: 768px) {
    &--responsive {
      padding-left: $semantic-spacing-component-sm;
      padding-right: $semantic-spacing-component-sm;
      
      &.ui-container--card {
        border-radius: $semantic-border-radius-sm;
        padding: $semantic-spacing-component-sm;
      }
      
      &.ui-container--section {
        padding-top: $semantic-spacing-layout-section-xs;
        padding-bottom: $semantic-spacing-layout-section-xs;
      }
      
      &.ui-container--hero {
        padding-top: $semantic-spacing-layout-section-sm;
        padding-bottom: $semantic-spacing-layout-section-sm;
      }
      
      &.ui-container--grid-4,
      &.ui-container--grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
      
      &.ui-container--flex-row {
        flex-direction: column;
      }
    }
  }
  
  @media (max-width: 480px) {
    &--responsive {
      padding-left: $semantic-spacing-component-xs;
      padding-right: $semantic-spacing-component-xs;
      
      &.ui-container--grid-4,
      &.ui-container--grid-3,
      &.ui-container--grid-2 {
        grid-template-columns: 1fr;
      }
    }
  }
  
  // Constrain content width while maintaining container responsiveness
  &--prose {
    max-width: 65ch;
  }
  
  // Scrollable container
  &--scrollable {
    overflow-y: auto;
    
    &.ui-container--scrollable-x {
      overflow-x: auto;
      overflow-y: visible;
    }
    
    &.ui-container--scrollable-both {
      overflow: auto;
    }
  }
}