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

.ui-flex {
  // Core flexbox container
  display: flex;
  box-sizing: border-box;
  
  // Direction variants
  &--row {
    flex-direction: row;
  }
  
  &--row-reverse {
    flex-direction: row-reverse;
  }
  
  &--column {
    flex-direction: column;
  }
  
  &--column-reverse {
    flex-direction: column-reverse;
  }
  
  // Wrap variants
  &--nowrap {
    flex-wrap: nowrap;
  }
  
  &--wrap {
    flex-wrap: wrap;
  }
  
  &--wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  
  // Justify content variants
  &--justify-start {
    justify-content: flex-start;
  }
  
  &--justify-end {
    justify-content: flex-end;
  }
  
  &--justify-center {
    justify-content: center;
  }
  
  &--justify-between {
    justify-content: space-between;
  }
  
  &--justify-around {
    justify-content: space-around;
  }
  
  &--justify-evenly {
    justify-content: space-evenly;
  }
  
  // Align items variants
  &--align-start {
    align-items: flex-start;
  }
  
  &--align-end {
    align-items: flex-end;
  }
  
  &--align-center {
    align-items: center;
  }
  
  &--align-baseline {
    align-items: baseline;
  }
  
  &--align-stretch {
    align-items: stretch;
  }
  
  // Align content variants (for wrapped flex containers)
  &--align-content-start {
    align-content: flex-start;
  }
  
  &--align-content-end {
    align-content: flex-end;
  }
  
  &--align-content-center {
    align-content: center;
  }
  
  &--align-content-between {
    align-content: space-between;
  }
  
  &--align-content-around {
    align-content: space-around;
  }
  
  &--align-content-stretch {
    align-content: stretch;
  }
  
  // Gap variants using semantic spacing tokens
  &--gap-xs {
    gap: $semantic-spacing-component-xs;
  }
  
  &--gap-sm {
    gap: $semantic-spacing-component-sm;
  }
  
  &--gap-md {
    gap: $semantic-spacing-component-md;
  }
  
  &--gap-lg {
    gap: $semantic-spacing-component-lg;
  }
  
  &--gap-xl {
    gap: $semantic-spacing-component-xl;
  }
  
  // Row gap variants
  &--row-gap-xs {
    row-gap: $semantic-spacing-component-xs;
  }
  
  &--row-gap-sm {
    row-gap: $semantic-spacing-component-sm;
  }
  
  &--row-gap-md {
    row-gap: $semantic-spacing-component-md;
  }
  
  &--row-gap-lg {
    row-gap: $semantic-spacing-component-lg;
  }
  
  &--row-gap-xl {
    row-gap: $semantic-spacing-component-xl;
  }
  
  // Column gap variants
  &--column-gap-xs {
    column-gap: $semantic-spacing-component-xs;
  }
  
  &--column-gap-sm {
    column-gap: $semantic-spacing-component-sm;
  }
  
  &--column-gap-md {
    column-gap: $semantic-spacing-component-md;
  }
  
  &--column-gap-lg {
    column-gap: $semantic-spacing-component-lg;
  }
  
  &--column-gap-xl {
    column-gap: $semantic-spacing-component-xl;
  }
  
  // Inline flex variant
  &--inline {
    display: inline-flex;
  }
  
  // Full width/height variants
  &--full-width {
    width: 100%;
  }
  
  &--full-height {
    height: 100%;
  }
  
  &--full {
    width: 100%;
    height: 100%;
  }
}