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

.ui-spacer {
  display: block;
  position: relative;
  
  // Default spacing (only when not flexible)
  &:not(.ui-spacer--flexible) {
    width: tokens.$semantic-spacing-md;
    height: tokens.$semantic-spacing-md;
  }
  
  // Size variants (only when not flexible)
  &--xs:not(.ui-spacer--flexible) {
    width: tokens.$semantic-spacing-xs;
    height: tokens.$semantic-spacing-xs;
  }
  
  &--sm:not(.ui-spacer--flexible) {
    width: tokens.$semantic-spacing-sm;
    height: tokens.$semantic-spacing-sm;
  }
  
  &--md:not(.ui-spacer--flexible) {
    width: tokens.$semantic-spacing-md;
    height: tokens.$semantic-spacing-md;
  }
  
  &--lg:not(.ui-spacer--flexible) {
    width: tokens.$semantic-spacing-lg;
    height: tokens.$semantic-spacing-lg;
  }
  
  &--xl:not(.ui-spacer--flexible) {
    width: tokens.$semantic-spacing-xl;
    height: tokens.$semantic-spacing-xl;
  }
  
  &--2xl:not(.ui-spacer--flexible) {
    width: tokens.$semantic-spacing-2xl;
    height: tokens.$semantic-spacing-2xl;
  }
  
  &--3xl:not(.ui-spacer--flexible) {
    width: tokens.$semantic-spacing-3xl;
    height: tokens.$semantic-spacing-3xl;
  }
  
  &--4xl:not(.ui-spacer--flexible) {
    width: tokens.$semantic-spacing-4xl;
    height: tokens.$semantic-spacing-4xl;
  }
  
  &--5xl:not(.ui-spacer--flexible) {
    width: tokens.$semantic-spacing-5xl;
    height: tokens.$semantic-spacing-5xl;
  }
  
  // Directional variants (only when not flexible)
  &--horizontal:not(.ui-spacer--flexible) {
    height: 0;
    width: tokens.$semantic-spacing-md;
    
    &.ui-spacer--xs { width: tokens.$semantic-spacing-xs; }
    &.ui-spacer--sm { width: tokens.$semantic-spacing-sm; }
    &.ui-spacer--md { width: tokens.$semantic-spacing-md; }
    &.ui-spacer--lg { width: tokens.$semantic-spacing-lg; }
    &.ui-spacer--xl { width: tokens.$semantic-spacing-xl; }
    &.ui-spacer--2xl { width: tokens.$semantic-spacing-2xl; }
    &.ui-spacer--3xl { width: tokens.$semantic-spacing-3xl; }
    &.ui-spacer--4xl { width: tokens.$semantic-spacing-4xl; }
    &.ui-spacer--5xl { width: tokens.$semantic-spacing-5xl; }
  }
  
  &--vertical:not(.ui-spacer--flexible) {
    width: 0;
    height: tokens.$semantic-spacing-md;
    
    &.ui-spacer--xs { height: tokens.$semantic-spacing-xs; }
    &.ui-spacer--sm { height: tokens.$semantic-spacing-sm; }
    &.ui-spacer--md { height: tokens.$semantic-spacing-md; }
    &.ui-spacer--lg { height: tokens.$semantic-spacing-lg; }
    &.ui-spacer--xl { height: tokens.$semantic-spacing-xl; }
    &.ui-spacer--2xl { height: tokens.$semantic-spacing-2xl; }
    &.ui-spacer--3xl { height: tokens.$semantic-spacing-3xl; }
    &.ui-spacer--4xl { height: tokens.$semantic-spacing-4xl; }
    &.ui-spacer--5xl { height: tokens.$semantic-spacing-5xl; }
  }
  
  // Flexible spacer (grows to fill available space)
  &--flexible {
    flex: 1 1 0;
    
    &.ui-spacer--horizontal {
      height: 0;
      min-width: tokens.$semantic-spacing-xs;
    }
    
    &.ui-spacer--vertical {
      width: 0;
      min-height: tokens.$semantic-spacing-xs;
    }
    
    // When both directions, allow flex in any direction
    &:not(.ui-spacer--horizontal):not(.ui-spacer--vertical) {
      min-width: tokens.$semantic-spacing-xs;
      min-height: tokens.$semantic-spacing-xs;
    }
  }
  
  // Component-specific spacing variants
  &--component-xs {
    width: tokens.$semantic-spacing-component-xs;
    height: tokens.$semantic-spacing-component-xs;
    
    &.ui-spacer--horizontal {
      width: tokens.$semantic-spacing-component-xs;
      height: 0;
    }
    
    &.ui-spacer--vertical {
      width: 0;
      height: tokens.$semantic-spacing-component-xs;
    }
  }
  
  &--component-sm {
    width: tokens.$semantic-spacing-component-sm;
    height: tokens.$semantic-spacing-component-sm;
    
    &.ui-spacer--horizontal {
      width: tokens.$semantic-spacing-component-sm;
      height: 0;
    }
    
    &.ui-spacer--vertical {
      width: 0;
      height: tokens.$semantic-spacing-component-sm;
    }
  }
  
  &--component-md {
    width: tokens.$semantic-spacing-component-md;
    height: tokens.$semantic-spacing-component-md;
    
    &.ui-spacer--horizontal {
      width: tokens.$semantic-spacing-component-md;
      height: 0;
    }
    
    &.ui-spacer--vertical {
      width: 0;
      height: tokens.$semantic-spacing-component-md;
    }
  }
  
  &--component-lg {
    width: tokens.$semantic-spacing-component-lg;
    height: tokens.$semantic-spacing-component-lg;
    
    &.ui-spacer--horizontal {
      width: tokens.$semantic-spacing-component-lg;
      height: 0;
    }
    
    &.ui-spacer--vertical {
      width: 0;
      height: tokens.$semantic-spacing-component-lg;
    }
  }
  
  &--component-xl {
    width: tokens.$semantic-spacing-component-xl;
    height: tokens.$semantic-spacing-component-xl;
    
    &.ui-spacer--horizontal {
      width: tokens.$semantic-spacing-component-xl;
      height: 0;
    }
    
    &.ui-spacer--vertical {
      width: 0;
      height: tokens.$semantic-spacing-component-xl;
    }
  }
  
  // Layout-specific spacing variants
  &--layout-xs {
    width: tokens.$semantic-spacing-layout-xs;
    height: tokens.$semantic-spacing-layout-xs;
    
    &.ui-spacer--horizontal {
      width: tokens.$semantic-spacing-layout-xs;
      height: 0;
    }
    
    &.ui-spacer--vertical {
      width: 0;
      height: tokens.$semantic-spacing-layout-xs;
    }
  }
  
  &--layout-sm {
    width: tokens.$semantic-spacing-layout-sm;
    height: tokens.$semantic-spacing-layout-sm;
    
    &.ui-spacer--horizontal {
      width: tokens.$semantic-spacing-layout-sm;
      height: 0;
    }
    
    &.ui-spacer--vertical {
      width: 0;
      height: tokens.$semantic-spacing-layout-sm;
    }
  }
  
  &--layout-md {
    width: tokens.$semantic-spacing-layout-md;
    height: tokens.$semantic-spacing-layout-md;
    
    &.ui-spacer--horizontal {
      width: tokens.$semantic-spacing-layout-md;
      height: 0;
    }
    
    &.ui-spacer--vertical {
      width: 0;
      height: tokens.$semantic-spacing-layout-md;
    }
  }
  
  &--layout-lg {
    width: tokens.$semantic-spacing-layout-lg;
    height: tokens.$semantic-spacing-layout-lg;
    
    &.ui-spacer--horizontal {
      width: tokens.$semantic-spacing-layout-lg;
      height: 0;
    }
    
    &.ui-spacer--vertical {
      width: 0;
      height: tokens.$semantic-spacing-layout-lg;
    }
  }
  
  &--layout-xl {
    width: tokens.$semantic-spacing-layout-xl;
    height: tokens.$semantic-spacing-layout-xl;
    
    &.ui-spacer--horizontal {
      width: tokens.$semantic-spacing-layout-xl;
      height: 0;
    }
    
    &.ui-spacer--vertical {
      width: 0;
      height: tokens.$semantic-spacing-layout-xl;
    }
  }
  
  // Visual debug mode (only in development)
  &--debug {
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(255, 0, 0, 0.1) 2px,
      rgba(255, 0, 0, 0.1) 4px
    );
    border: 1px dashed rgba(255, 0, 0, 0.3);
  }
  
  // Responsive behavior
  @media (max-width: 768px) {
    &--responsive {
      &.ui-spacer--xl,
      &.ui-spacer--2xl,
      &.ui-spacer--3xl,
      &.ui-spacer--4xl,
      &.ui-spacer--5xl {
        width: tokens.$semantic-spacing-lg;
        height: tokens.$semantic-spacing-lg;
        
        &.ui-spacer--horizontal {
          width: tokens.$semantic-spacing-lg;
          height: 0;
        }
        
        &.ui-spacer--vertical {
          width: 0;
          height: tokens.$semantic-spacing-lg;
        }
      }
    }
  }
  
  @media (max-width: 480px) {
    &--responsive {
      &.ui-spacer--lg,
      &.ui-spacer--xl,
      &.ui-spacer--2xl,
      &.ui-spacer--3xl,
      &.ui-spacer--4xl,
      &.ui-spacer--5xl {
        width: tokens.$semantic-spacing-md;
        height: tokens.$semantic-spacing-md;
        
        &.ui-spacer--horizontal {
          width: tokens.$semantic-spacing-md;
          height: 0;
        }
        
        &.ui-spacer--vertical {
          width: 0;
          height: tokens.$semantic-spacing-md;
        }
      }
    }
  }
}