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

.ui-box {
  // Base box behavior
  box-sizing: border-box;
  
  // Display variants
  &--display-block {
    display: block;
  }
  
  &--display-inline {
    display: inline;
  }
  
  &--display-inline-block {
    display: inline-block;
  }
  
  &--display-flex {
    display: flex;
  }
  
  &--display-inline-flex {
    display: inline-flex;
  }
  
  &--display-grid {
    display: grid;
  }
  
  &--display-inline-grid {
    display: inline-grid;
  }
  
  // Position variants
  &--position-relative {
    position: relative;
  }
  
  &--position-absolute {
    position: absolute;
  }
  
  &--position-fixed {
    position: fixed;
  }
  
  &--position-sticky {
    position: sticky;
  }
  
  // Overflow variants
  &--overflow-hidden {
    overflow: hidden;
  }
  
  &--overflow-scroll {
    overflow: scroll;
  }
  
  &--overflow-auto {
    overflow: auto;
  }
  
  // Padding utilities - All sides
  &--p-none {
    padding: 0;
  }
  
  &--p-xs {
    padding: $semantic-spacing-component-xs;
  }
  
  &--p-sm {
    padding: $semantic-spacing-component-sm;
  }
  
  &--p-md {
    padding: $semantic-spacing-component-md;
  }
  
  &--p-lg {
    padding: $semantic-spacing-component-lg;
  }
  
  &--p-xl {
    padding: $semantic-spacing-component-xl;
  }
  
  &--p-2xl {
    padding: $semantic-spacing-2xl;
  }
  
  &--p-3xl {
    padding: $semantic-spacing-3xl;
  }
  
  &--p-4xl {
    padding: $semantic-spacing-4xl;
  }
  
  &--p-5xl {
    padding: $semantic-spacing-5xl;
  }
  
  // Padding utilities - Horizontal (left + right)
  &--px-none {
    padding-left: 0;
    padding-right: 0;
  }
  
  &--px-xs {
    padding-left: $semantic-spacing-component-xs;
    padding-right: $semantic-spacing-component-xs;
  }
  
  &--px-sm {
    padding-left: $semantic-spacing-component-sm;
    padding-right: $semantic-spacing-component-sm;
  }
  
  &--px-md {
    padding-left: $semantic-spacing-component-md;
    padding-right: $semantic-spacing-component-md;
  }
  
  &--px-lg {
    padding-left: $semantic-spacing-component-lg;
    padding-right: $semantic-spacing-component-lg;
  }
  
  &--px-xl {
    padding-left: $semantic-spacing-component-xl;
    padding-right: $semantic-spacing-component-xl;
  }
  
  &--px-2xl {
    padding-left: $semantic-spacing-2xl;
    padding-right: $semantic-spacing-2xl;
  }
  
  &--px-3xl {
    padding-left: $semantic-spacing-3xl;
    padding-right: $semantic-spacing-3xl;
  }
  
  &--px-4xl {
    padding-left: $semantic-spacing-4xl;
    padding-right: $semantic-spacing-4xl;
  }
  
  &--px-5xl {
    padding-left: $semantic-spacing-5xl;
    padding-right: $semantic-spacing-5xl;
  }
  
  // Padding utilities - Vertical (top + bottom)
  &--py-none {
    padding-top: 0;
    padding-bottom: 0;
  }
  
  &--py-xs {
    padding-top: $semantic-spacing-component-xs;
    padding-bottom: $semantic-spacing-component-xs;
  }
  
  &--py-sm {
    padding-top: $semantic-spacing-component-sm;
    padding-bottom: $semantic-spacing-component-sm;
  }
  
  &--py-md {
    padding-top: $semantic-spacing-component-md;
    padding-bottom: $semantic-spacing-component-md;
  }
  
  &--py-lg {
    padding-top: $semantic-spacing-component-lg;
    padding-bottom: $semantic-spacing-component-lg;
  }
  
  &--py-xl {
    padding-top: $semantic-spacing-component-xl;
    padding-bottom: $semantic-spacing-component-xl;
  }
  
  &--py-2xl {
    padding-top: $semantic-spacing-2xl;
    padding-bottom: $semantic-spacing-2xl;
  }
  
  &--py-3xl {
    padding-top: $semantic-spacing-3xl;
    padding-bottom: $semantic-spacing-3xl;
  }
  
  &--py-4xl {
    padding-top: $semantic-spacing-4xl;
    padding-bottom: $semantic-spacing-4xl;
  }
  
  &--py-5xl {
    padding-top: $semantic-spacing-5xl;
    padding-bottom: $semantic-spacing-5xl;
  }
  
  // Individual padding sides (pt, pr, pb, pl)
  &--pt-none { padding-top: 0; }
  &--pt-xs { padding-top: $semantic-spacing-component-xs; }
  &--pt-sm { padding-top: $semantic-spacing-component-sm; }
  &--pt-md { padding-top: $semantic-spacing-component-md; }
  &--pt-lg { padding-top: $semantic-spacing-component-lg; }
  &--pt-xl { padding-top: $semantic-spacing-component-xl; }
  &--pt-2xl { padding-top: $semantic-spacing-2xl; }
  &--pt-3xl { padding-top: $semantic-spacing-3xl; }
  &--pt-4xl { padding-top: $semantic-spacing-4xl; }
  &--pt-5xl { padding-top: $semantic-spacing-5xl; }
  
  &--pr-none { padding-right: 0; }
  &--pr-xs { padding-right: $semantic-spacing-component-xs; }
  &--pr-sm { padding-right: $semantic-spacing-component-sm; }
  &--pr-md { padding-right: $semantic-spacing-component-md; }
  &--pr-lg { padding-right: $semantic-spacing-component-lg; }
  &--pr-xl { padding-right: $semantic-spacing-component-xl; }
  &--pr-2xl { padding-right: $semantic-spacing-2xl; }
  &--pr-3xl { padding-right: $semantic-spacing-3xl; }
  &--pr-4xl { padding-right: $semantic-spacing-4xl; }
  &--pr-5xl { padding-right: $semantic-spacing-5xl; }
  
  &--pb-none { padding-bottom: 0; }
  &--pb-xs { padding-bottom: $semantic-spacing-component-xs; }
  &--pb-sm { padding-bottom: $semantic-spacing-component-sm; }
  &--pb-md { padding-bottom: $semantic-spacing-component-md; }
  &--pb-lg { padding-bottom: $semantic-spacing-component-lg; }
  &--pb-xl { padding-bottom: $semantic-spacing-component-xl; }
  &--pb-2xl { padding-bottom: $semantic-spacing-2xl; }
  &--pb-3xl { padding-bottom: $semantic-spacing-3xl; }
  &--pb-4xl { padding-bottom: $semantic-spacing-4xl; }
  &--pb-5xl { padding-bottom: $semantic-spacing-5xl; }
  
  &--pl-none { padding-left: 0; }
  &--pl-xs { padding-left: $semantic-spacing-component-xs; }
  &--pl-sm { padding-left: $semantic-spacing-component-sm; }
  &--pl-md { padding-left: $semantic-spacing-component-md; }
  &--pl-lg { padding-left: $semantic-spacing-component-lg; }
  &--pl-xl { padding-left: $semantic-spacing-component-xl; }
  &--pl-2xl { padding-left: $semantic-spacing-2xl; }
  &--pl-3xl { padding-left: $semantic-spacing-3xl; }
  &--pl-4xl { padding-left: $semantic-spacing-4xl; }
  &--pl-5xl { padding-left: $semantic-spacing-5xl; }
  
  // Margin utilities - All sides
  &--m-none {
    margin: 0;
  }
  
  &--m-xs {
    margin: $semantic-spacing-layout-xs;
  }
  
  &--m-sm {
    margin: $semantic-spacing-layout-sm;
  }
  
  &--m-md {
    margin: $semantic-spacing-layout-md;
  }
  
  &--m-lg {
    margin: $semantic-spacing-layout-lg;
  }
  
  &--m-xl {
    margin: $semantic-spacing-layout-xl;
  }
  
  &--m-2xl {
    margin: $semantic-spacing-2xl;
  }
  
  &--m-3xl {
    margin: $semantic-spacing-3xl;
  }
  
  &--m-4xl {
    margin: $semantic-spacing-4xl;
  }
  
  &--m-5xl {
    margin: $semantic-spacing-5xl;
  }
  
  // Margin utilities - Horizontal (left + right)
  &--mx-none {
    margin-left: 0;
    margin-right: 0;
  }
  
  &--mx-xs {
    margin-left: $semantic-spacing-layout-xs;
    margin-right: $semantic-spacing-layout-xs;
  }
  
  &--mx-sm {
    margin-left: $semantic-spacing-layout-sm;
    margin-right: $semantic-spacing-layout-sm;
  }
  
  &--mx-md {
    margin-left: $semantic-spacing-layout-md;
    margin-right: $semantic-spacing-layout-md;
  }
  
  &--mx-lg {
    margin-left: $semantic-spacing-layout-lg;
    margin-right: $semantic-spacing-layout-lg;
  }
  
  &--mx-xl {
    margin-left: $semantic-spacing-layout-xl;
    margin-right: $semantic-spacing-layout-xl;
  }
  
  &--mx-2xl {
    margin-left: $semantic-spacing-2xl;
    margin-right: $semantic-spacing-2xl;
  }
  
  &--mx-3xl {
    margin-left: $semantic-spacing-3xl;
    margin-right: $semantic-spacing-3xl;
  }
  
  &--mx-4xl {
    margin-left: $semantic-spacing-4xl;
    margin-right: $semantic-spacing-4xl;
  }
  
  &--mx-5xl {
    margin-left: $semantic-spacing-5xl;
    margin-right: $semantic-spacing-5xl;
  }
  
  // Margin utilities - Vertical (top + bottom)
  &--my-none {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  &--my-xs {
    margin-top: $semantic-spacing-layout-xs;
    margin-bottom: $semantic-spacing-layout-xs;
  }
  
  &--my-sm {
    margin-top: $semantic-spacing-layout-sm;
    margin-bottom: $semantic-spacing-layout-sm;
  }
  
  &--my-md {
    margin-top: $semantic-spacing-layout-md;
    margin-bottom: $semantic-spacing-layout-md;
  }
  
  &--my-lg {
    margin-top: $semantic-spacing-layout-lg;
    margin-bottom: $semantic-spacing-layout-lg;
  }
  
  &--my-xl {
    margin-top: $semantic-spacing-layout-xl;
    margin-bottom: $semantic-spacing-layout-xl;
  }
  
  &--my-2xl {
    margin-top: $semantic-spacing-2xl;
    margin-bottom: $semantic-spacing-2xl;
  }
  
  &--my-3xl {
    margin-top: $semantic-spacing-3xl;
    margin-bottom: $semantic-spacing-3xl;
  }
  
  &--my-4xl {
    margin-top: $semantic-spacing-4xl;
    margin-bottom: $semantic-spacing-4xl;
  }
  
  &--my-5xl {
    margin-top: $semantic-spacing-5xl;
    margin-bottom: $semantic-spacing-5xl;
  }
  
  // Individual margin sides (mt, mr, mb, ml)
  &--mt-none { margin-top: 0; }
  &--mt-xs { margin-top: $semantic-spacing-layout-xs; }
  &--mt-sm { margin-top: $semantic-spacing-layout-sm; }
  &--mt-md { margin-top: $semantic-spacing-layout-md; }
  &--mt-lg { margin-top: $semantic-spacing-layout-lg; }
  &--mt-xl { margin-top: $semantic-spacing-layout-xl; }
  &--mt-2xl { margin-top: $semantic-spacing-2xl; }
  &--mt-3xl { margin-top: $semantic-spacing-3xl; }
  &--mt-4xl { margin-top: $semantic-spacing-4xl; }
  &--mt-5xl { margin-top: $semantic-spacing-5xl; }
  
  &--mr-none { margin-right: 0; }
  &--mr-xs { margin-right: $semantic-spacing-layout-xs; }
  &--mr-sm { margin-right: $semantic-spacing-layout-sm; }
  &--mr-md { margin-right: $semantic-spacing-layout-md; }
  &--mr-lg { margin-right: $semantic-spacing-layout-lg; }
  &--mr-xl { margin-right: $semantic-spacing-layout-xl; }
  &--mr-2xl { margin-right: $semantic-spacing-2xl; }
  &--mr-3xl { margin-right: $semantic-spacing-3xl; }
  &--mr-4xl { margin-right: $semantic-spacing-4xl; }
  &--mr-5xl { margin-right: $semantic-spacing-5xl; }
  
  &--mb-none { margin-bottom: 0; }
  &--mb-xs { margin-bottom: $semantic-spacing-layout-xs; }
  &--mb-sm { margin-bottom: $semantic-spacing-layout-sm; }
  &--mb-md { margin-bottom: $semantic-spacing-layout-md; }
  &--mb-lg { margin-bottom: $semantic-spacing-layout-lg; }
  &--mb-xl { margin-bottom: $semantic-spacing-layout-xl; }
  &--mb-2xl { margin-bottom: $semantic-spacing-2xl; }
  &--mb-3xl { margin-bottom: $semantic-spacing-3xl; }
  &--mb-4xl { margin-bottom: $semantic-spacing-4xl; }
  &--mb-5xl { margin-bottom: $semantic-spacing-5xl; }
  
  &--ml-none { margin-left: 0; }
  &--ml-xs { margin-left: $semantic-spacing-layout-xs; }
  &--ml-sm { margin-left: $semantic-spacing-layout-sm; }
  &--ml-md { margin-left: $semantic-spacing-layout-md; }
  &--ml-lg { margin-left: $semantic-spacing-layout-lg; }
  &--ml-xl { margin-left: $semantic-spacing-layout-xl; }
  &--ml-2xl { margin-left: $semantic-spacing-2xl; }
  &--ml-3xl { margin-left: $semantic-spacing-3xl; }
  &--ml-4xl { margin-left: $semantic-spacing-4xl; }
  &--ml-5xl { margin-left: $semantic-spacing-5xl; }
  
  // Visual utilities
  &--rounded {
    border-radius: $semantic-border-radius-md;
  }
  
  &--shadow {
    box-shadow: $semantic-shadow-elevation-2;
  }
  
  &--border {
    border: $semantic-border-width-1 solid $semantic-color-border-primary;
  }
}