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

.ui-section {
  display: block;
  position: relative;
  width: 100%;
  
  // Base spacing - using semantic layout section tokens
  &--spacing-xs {
    padding-top: $semantic-spacing-layout-section-xs;
    padding-bottom: $semantic-spacing-layout-section-xs;
  }
  
  &--spacing-sm {
    padding-top: $semantic-spacing-layout-section-sm;
    padding-bottom: $semantic-spacing-layout-section-sm;
  }
  
  &--spacing-md {
    padding-top: $semantic-spacing-layout-section-md;
    padding-bottom: $semantic-spacing-layout-section-md;
  }
  
  &--spacing-lg {
    padding-top: $semantic-spacing-layout-section-lg;
    padding-bottom: $semantic-spacing-layout-section-lg;
  }
  
  &--spacing-xl {
    padding-top: $semantic-spacing-layout-section-xl;
    padding-bottom: $semantic-spacing-layout-section-xl;
  }
  
  // Background variants
  &--surface {
    background: $semantic-color-surface-primary;
  }
  
  &--surface-secondary {
    background: $semantic-color-surface-secondary;
  }
  
  &--surface-elevated {
    background: $semantic-color-surface-elevated;
  }
  
  // Content alignment
  &--align-center {
    text-align: center;
  }
  
  &--align-end {
    text-align: end;
  }
  
  // Width variants
  &--full-width {
    width: 100%;
    max-width: none;
  }
  
  &--contained {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: $semantic-spacing-component-md;
    padding-right: $semantic-spacing-component-md;
  }
  
  // Typography styling for section content
  color: $semantic-color-text-primary;
  font-family: map-get($semantic-typography-body-medium, font-family);
  font-size: map-get($semantic-typography-body-medium, font-size);
  font-weight: map-get($semantic-typography-body-medium, font-weight);
  line-height: map-get($semantic-typography-body-medium, line-height);
  
  // Responsive behavior
  @media (max-width: 768px) {
    &--contained {
      padding-left: $semantic-spacing-component-sm;
      padding-right: $semantic-spacing-component-sm;
    }
    
    // Reduce section spacing on mobile
    &--spacing-xl {
      padding-top: $semantic-spacing-layout-section-lg;
      padding-bottom: $semantic-spacing-layout-section-lg;
    }
    
    &--spacing-lg {
      padding-top: $semantic-spacing-layout-section-md;
      padding-bottom: $semantic-spacing-layout-section-md;
    }
  }
  
  @media (max-width: 480px) {
    &--contained {
      padding-left: $semantic-spacing-component-xs;
      padding-right: $semantic-spacing-component-xs;
    }
    
    // Further reduce section spacing on very small screens
    &--spacing-xl,
    &--spacing-lg {
      padding-top: $semantic-spacing-layout-section-sm;
      padding-bottom: $semantic-spacing-layout-section-sm;
    }
    
    &--spacing-md {
      padding-top: $semantic-spacing-layout-section-xs;
      padding-bottom: $semantic-spacing-layout-section-xs;
    }
  }
}