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

.ui-center {
  // Base structure - centering container
  display: flex;
  box-sizing: border-box;
  
  // Both axis centering (default)
  &--both {
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  
  // Horizontal centering only
  &--horizontal {
    justify-content: center;
    flex-direction: row;
  }
  
  // Vertical centering only  
  &--vertical {
    align-items: center;
    flex-direction: column;
  }
  
  // Inline variant
  &--inline {
    display: inline-flex;
  }
  
  // Max width constraints
  &--max-width-xs {
    max-width: 475px;
  }
  
  &--max-width-sm {
    max-width: 640px;
  }
  
  &--max-width-md {
    max-width: 768px;
  }
  
  &--max-width-lg {
    max-width: 1024px;
  }
  
  &--max-width-xl {
    max-width: 1280px;
  }
  
  &--max-width-2xl {
    max-width: 1536px;
  }
  
  &--max-width-3xl {
    max-width: 1792px;
  }
  
  &--max-width-full {
    width: 100%;
  }
  
  // Padding variants
  &--padding-xs {
    padding: $semantic-spacing-component-xs;
  }
  
  &--padding-sm {
    padding: $semantic-spacing-component-sm;
  }
  
  &--padding-md {
    padding: $semantic-spacing-component-md;
  }
  
  &--padding-lg {
    padding: $semantic-spacing-component-lg;
  }
  
  &--padding-xl {
    padding: $semantic-spacing-component-xl;
  }
  
  &--padding-none {
    padding: 0;
  }
  
  // Margin variants
  &--margin-xs {
    margin: $semantic-spacing-component-xs;
  }
  
  &--margin-sm {
    margin: $semantic-spacing-component-sm;
  }
  
  &--margin-md {
    margin: $semantic-spacing-component-md;
  }
  
  &--margin-lg {
    margin: $semantic-spacing-component-lg;
  }
  
  &--margin-xl {
    margin: $semantic-spacing-component-xl;
  }
  
  &--margin-none {
    margin: 0;
  }
  
  // Responsive adjustments - ensure centering works on all screen sizes
  @media (max-width: 768px) {
    &--max-width-xl,
    &--max-width-lg {
      max-width: 100%;
      padding-left: $semantic-spacing-component-sm;
      padding-right: $semantic-spacing-component-sm;
    }
    
    // Stack content vertically on smaller screens for horizontal centering
    &--horizontal {
      flex-direction: column;
      align-items: center;
    }
  }
  
  @media (max-width: 480px) {
    &--max-width-md,
    &--max-width-sm {
      max-width: 100%;
      padding-left: $semantic-spacing-component-xs;
      padding-right: $semantic-spacing-component-xs;
    }
  }
}