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

.ui-breakpoint-container {
  position: relative;
  display: block;
  
  // Base visibility - show by default
  &:not(.ui-breakpoint-container--hidden) {
    display: block;
  }
  
  &--hidden {
    display: none !important;
  }
  
  // Show only on mobile (below tablet)
  &--mobile-only {
    display: block;
    
    @media (min-width: $semantic-breakpoint-md) {
      display: none !important;
    }
  }
  
  // Hide on mobile
  &--mobile-hidden {
    display: none;
    
    @media (min-width: $semantic-breakpoint-md) {
      display: block;
    }
  }
  
  // Show only on tablet (between mobile and desktop)
  &--tablet-only {
    display: none;
    
    @media (min-width: $semantic-breakpoint-md) and (max-width: $semantic-breakpoint-lg - 1px) {
      display: block;
    }
  }
  
  // Hide on tablet
  &--tablet-hidden {
    display: block;
    
    @media (min-width: $semantic-breakpoint-md) and (max-width: $semantic-breakpoint-lg - 1px) {
      display: none !important;
    }
  }
  
  // Show only on desktop and up
  &--desktop-only {
    display: none;
    
    @media (min-width: $semantic-breakpoint-lg) {
      display: block;
    }
  }
  
  // Hide on desktop and up
  &--desktop-hidden {
    display: block;
    
    @media (min-width: $semantic-breakpoint-lg) {
      display: none !important;
    }
  }
  
  // Custom breakpoint utilities
  &--show-sm {
    display: none;
    
    @media (min-width: $semantic-breakpoint-sm) {
      display: block;
    }
  }
  
  &--hide-sm {
    display: block;
    
    @media (min-width: $semantic-breakpoint-sm) {
      display: none !important;
    }
  }
  
  &--show-md {
    display: none;
    
    @media (min-width: $semantic-breakpoint-md) {
      display: block;
    }
  }
  
  &--hide-md {
    display: block;
    
    @media (min-width: $semantic-breakpoint-md) {
      display: none !important;
    }
  }
  
  &--show-lg {
    display: none;
    
    @media (min-width: $semantic-breakpoint-lg) {
      display: block;
    }
  }
  
  &--hide-lg {
    display: block;
    
    @media (min-width: $semantic-breakpoint-lg) {
      display: none !important;
    }
  }
  
  // Screen size based visibility using semantic sizing breakpoints
  &--mobile-screen {
    display: block;
    
    @media (min-width: $semantic-sizing-breakpoint-tablet) {
      display: none !important;
    }
  }
  
  &--tablet-screen {
    display: none;
    
    @media (min-width: $semantic-sizing-breakpoint-tablet) and (max-width: $semantic-sizing-breakpoint-desktop - 1px) {
      display: block;
    }
  }
  
  &--desktop-screen {
    display: none;
    
    @media (min-width: $semantic-sizing-breakpoint-desktop) {
      display: block;
    }
  }
  
  // Combination utilities - show/hide between specific ranges
  &--sm-to-md {
    display: none;
    
    @media (min-width: $semantic-breakpoint-sm) and (max-width: $semantic-breakpoint-md - 1px) {
      display: block;
    }
  }
  
  &--md-to-lg {
    display: none;
    
    @media (min-width: $semantic-breakpoint-md) and (max-width: $semantic-breakpoint-lg - 1px) {
      display: block;
    }
  }
  
  // Inline display variant
  &--inline {
    display: inline;
    
    &.ui-breakpoint-container--hidden {
      display: none !important;
    }
    
    &.ui-breakpoint-container--mobile-only {
      display: inline;
      
      @media (min-width: $semantic-breakpoint-md) {
        display: none !important;
      }
    }
    
    &.ui-breakpoint-container--desktop-only {
      display: none;
      
      @media (min-width: $semantic-breakpoint-lg) {
        display: inline;
      }
    }
  }
  
  // Flex display variant
  &--flex {
    display: flex;
    
    &.ui-breakpoint-container--hidden {
      display: none !important;
    }
    
    &.ui-breakpoint-container--mobile-only {
      display: flex;
      
      @media (min-width: $semantic-breakpoint-md) {
        display: none !important;
      }
    }
    
    &.ui-breakpoint-container--desktop-only {
      display: none;
      
      @media (min-width: $semantic-breakpoint-lg) {
        display: flex;
      }
    }
  }
  
  // Print media query
  @media print {
    &--print-hidden {
      display: none !important;
    }
    
    &--print-only {
      display: block;
    }
    
    &:not(.ui-breakpoint-container--print-only) {
      &.ui-breakpoint-container--print-hidden {
        display: none !important;
      }
    }
  }
}