Visibility Component

Visibility JavaScript Methods & Events

// Toggle visibility
UIkit.toggle(element, options);

// Options
const options = {
  target: String,      // CSS selector of element to toggle
  cls: String,         // Class to toggle
  mode: 'media',       // 'media' or 'class'
  animation: String    // Animation class
};

// Usage examples
const toggle = UIkit.toggle('#myToggle', {
  target: '#targetElement',
  cls: 'uk-hidden'
});

// Toggle events
toggleElement.addEventListener('shown', function(event) {
  console.log('Element is now visible');
});

toggleElement.addEventListener('hidden', function(event) {
  console.log('Element is now hidden');
});

toggleElement.addEventListener('beforeshow', function(event) {
  console.log('Before showing element');
  // Prevent showing if needed
  // event.preventDefault();
});

// Dynamic visibility management
const visibilityManager = {
  
  // Check visibility status
  isVisible: function(element) {
    if (!element) return false;
    const style = window.getComputedStyle(element);
    return style.display !== 'none' && 
           style.visibility !== 'hidden' &&
           style.opacity !== '0';
  },
  
  // Show element with animation
  show: function(element, animation = 'fade') {
    if (!element) return;
    
    // Remove hidden classes
    element.classList.remove('uk-hidden');
    element.classList.remove('uk-invisible');
    
    // Add animation
    if (animation) {
      element.classList.add(`uk-animation-${animation}`);
      setTimeout(() => {
        element.classList.remove(`uk-animation-${animation}`);
      }, 300);
    }
    
    // Trigger custom event
    element.dispatchEvent(new CustomEvent('visibility:show'));
  },
  
  // Hide element
  hide: function(element, animation = 'fade') {
    if (!element) return;
    
    // Add animation before hiding
    if (animation) {
      element.classList.add(`uk-animation-${animation}`);
      setTimeout(() => {
        element.classList.add('uk-hidden');
        element.classList.remove(`uk-animation-${animation}`);
      }, 300);
    } else {
      element.classList.add('uk-hidden');
    }
    
    // Trigger custom event
    element.dispatchEvent(new CustomEvent('visibility:hide'));
  },
  
  // Toggle visibility
  toggle: function(element, animation) {
    if (this.isVisible(element)) {
      this.hide(element, animation);
    } else {
      this.show(element, animation);
    }
  },
  
  // Responsive visibility check
  isVisibleOnBreakpoint: function(element, breakpoint) {
    const breakpoints = {
      'xs': 0,
      's': 640,
      'm': 960,
      'l': 1200,
      'xl': 1600
    };
    
    const width = window.innerWidth;
    const bpWidth = breakpoints[breakpoint] || 0;
    
    if (breakpoint.includes('@')) {
      const dir = breakpoint.includes('>') ? 'min' : 'max';
      const bp = breakpoint.replace(/[@<>]/g, '');
      const bpWidth = breakpoints[bp] || 0;
      
      if (dir === 'min') {
        return width >= bpWidth;
      } else {
        return width < bpWidth;
      }
    }
    
    return width >= bpWidth;
  },
  
  // Update visibility based on breakpoint
  updateResponsiveVisibility: function() {
    const elements = document.querySelectorAll('[data-visible]');
    
    elements.forEach(element => {
      const conditions = element.dataset.visible.split(' ');
      
      conditions.forEach(condition => {
        const shouldShow = this.isVisibleOnBreakpoint(element, condition);
        
        if (condition.startsWith('@')) {
          if (shouldShow) {
            element.classList.remove('uk-hidden');
          } else {
            element.classList.add('uk-hidden');
          }
        }
      });
    });
  },
  
  // Device detection
  deviceInfo: {
    isTouch: function() {
      return 'ontouchstart' in window || 
             navigator.maxTouchPoints > 0 || 
             navigator.msMaxTouchPoints > 0;
    },
    
    isMobile: function() {
      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    },
    
    isTablet: function() {
      return /iPad|Android(?!.*Mobile)|Tablet/i.test(navigator.userAgent);
    },
    
    isDesktop: function() {
      return !this.isMobile() && !this.isTablet();
    },
    
    orientation: function() {
      return window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
    }
  },
  
  // Update device-specific visibility
  updateDeviceVisibility: function() {
    const touchElements = document.querySelectorAll('.uk-hidden-touch, .uk-hidden-notouch');
    
    touchElements.forEach(element => {
      const isTouch = this.deviceInfo.isTouch();
      
      if (element.classList.contains('uk-hidden-touch') && isTouch) {
        element.classList.add('uk-hidden');
      } else if (element.classList.contains('uk-hidden-notouch') && !isTouch) {
        element.classList.add('uk-hidden');
      } else {
        element.classList.remove('uk-hidden');
      }
    });
    
    // Update orientation classes
    const orientation = this.deviceInfo.orientation();
    const landscapeElements = document.querySelectorAll('.uk-hidden-landscape, .uk-invisible-landscape');
    const portraitElements = document.querySelectorAll('.uk-hidden-portrait, .uk-invisible-portrait');
    
    if (orientation === 'landscape') {
      landscapeElements.forEach(element => {
        if (element.classList.contains('uk-hidden-landscape')) {
          element.classList.add('uk-hidden');
        } else if (element.classList.contains('uk-invisible-landscape')) {
          element.classList.add('uk-invisible');
        }
      });
      portraitElements.forEach(element => {
        element.classList.remove('uk-hidden', 'uk-invisible');
      });
    } else {
      portraitElements.forEach(element => {
        if (element.classList.contains('uk-hidden-portrait')) {
          element.classList.add('uk-hidden');
        } else if (element.classList.contains('uk-invisible-portrait')) {
          element.classList.add('uk-invisible');
        }
      });
      landscapeElements.forEach(element => {
        element.classList.remove('uk-hidden', 'uk-invisible');
      });
    }
  },
  
  // Lazy load visibility
  lazyLoad: function() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const element = entry.target;
          
          // Show element
          element.classList.remove('uk-hidden');
          element.classList.add('uk-animation-fade');
          
          // Load content if needed
          if (element.dataset.src) {
            const img = element.querySelector('img');
            if (img) {
              img.src = element.dataset.src;
              img.onload = () => {
                element.classList.add('uk-animation-scale-up');
              };
            }
          }
          
          observer.unobserve(element);
        }
      });
    }, {
      rootMargin: '50px',
      threshold: 0.1
    });
    
    document.querySelectorAll('[data-lazy]').forEach(element => {
      observer.observe(element);
    });
  },
  
  // Print visibility management
  printMode: {
    isPrinting: false,
    
    init: function() {
      // Detect print
      window.addEventListener('beforeprint', () => {
        this.isPrinting = true;
        this.updatePrintVisibility();
      });
      
      window.addEventListener('afterprint', () => {
        this.isPrinting = false;
        this.updatePrintVisibility();
      });
    },
    
    updatePrintVisibility: function() {
      const printElements = document.querySelectorAll('.uk-visible-print, .uk-hidden-print');
      
      printElements.forEach(element => {
        if (this.isPrinting) {
          if (element.classList.contains('uk-hidden-print')) {
            element.style.display = 'none';
          } else if (element.classList.contains('uk-visible-print')) {
            element.style.display = '';
          }
        } else {
          if (element.classList.contains('uk-visible-print')) {
            element.style.display = 'none';
          } else {
            element.style.display = '';
          }
        }
      });
    },
    
    // Generate print view
    generatePrintView: function(contentSelector, options = {}) {
      const content = document.querySelector(contentSelector);
      if (!content) return;
      
      const printWindow = window.open('', '_blank');
      const printContent = content.cloneNode(true);
      
      // Remove non-print elements
      printContent.querySelectorAll('.uk-hidden-print').forEach(el => el.remove());
      
      // Show print-only elements
      printContent.querySelectorAll('.uk-visible-print').forEach(el => {
        el.style.display = '';
      });
      
      printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
          <title>${options.title || 'Print'}</title>
          <style>
            @media print {
              body { margin: 0; padding: 20px; }
              .no-print { display: none !important; }
              .only-print { display: block !important; }
              a { color: black; text-decoration: none; }
            }
            ${options.styles || ''}
          </style>
        </head>
        <body>
          ${printContent.outerHTML}
          <script>
            window.onload = function() {
              window.print();
              setTimeout(() => window.close(), 500);
            }
          </script>
        </body>
        </html>
      `);
    }
  },
  
  // Initialize all visibility features
  init: function() {
    // Initial updates
    this.updateDeviceVisibility();
    this.updateResponsiveVisibility();
    
    // Event listeners
    window.addEventListener('resize', () => {
      this.updateDeviceVisibility();
      this.updateResponsiveVisibility();
    });
    
    window.addEventListener('orientationchange', () => {
      setTimeout(() => {
        this.updateDeviceVisibility();
      }, 100);
    });
    
    // Initialize print mode
    this.printMode.init();
    
    // Initialize lazy loading
    this.lazyLoad();
    
    console.log('Visibility Manager initialized');
  }
};

// Initialize on DOM ready
document.addEventListener('DOMContentLoaded', () => {
  visibilityManager.init();
});

// Example usage
const element = document.getElementById('myElement');

// Show element
visibilityManager.show(element, 'slide-top');

// Hide element
setTimeout(() => {
  visibilityManager.hide(element, 'slide-bottom');
}, 2000);

// Check if visible
console.log('Is visible?', visibilityManager.isVisible(element));

// Toggle visibility
document.getElementById('toggleBtn').addEventListener('click', () => {
  visibilityManager.toggle(element, 'fade');
});

// Device information
console.log('Is touch device?', visibilityManager.deviceInfo.isTouch());
console.log('Orientation:', visibilityManager.deviceInfo.orientation());

// Print functionality
document.getElementById('printBtn').addEventListener('click', () => {
  visibilityManager.printMode.generatePrintView('#printContent', {
    title: 'My Document',
    styles: 'body { font-family: Arial; }'
  });
});

// Responsive visibility with data attributes
<div data-visible="@s @m" class="uk-hidden">
  This will be visible on small and medium screens
</div>

Responsive Navigation Menu

<!-- Responsive Navigation -->
<nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-left">
    <!-- Logo - Always visible -->
    <a class="uk-navbar-item uk-logo" href="#">Brand</a>
    
    <!-- Desktop Navigation -->
    <ul class="uk-navbar-nav uk-visible@s">
      <li class="uk-active"><a href="#">Home</a></li>
      <li>
        <a href="#">Products</a>
        <div class="uk-navbar-dropdown">
          <ul class="uk-nav uk-navbar-dropdown-nav">
            <li><a href="#">Product 1</a></li>
            <li><a href="#">Product 2</a></li>
            <li><a href="#">Product 3</a></li>
          </ul>
        </div>
      </li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  
  <div class="uk-navbar-right">
    <!-- Desktop Actions -->
    <div class="uk-navbar-item uk-visible@s">
      <div class="uk-inline">
        <button class="uk-button uk-button-default">
          <span uk-icon="icon: search"></span>
          <span class="uk-hidden@m">Search</span>
        </button>
        <div uk-drop="mode: click">
          <input class="uk-input" type="text" placeholder="Search...">
        </div>
      </div>
    </div>
    
    <!-- Mobile Menu Button -->
    <a class="uk-navbar-toggle uk-hidden@s" href="#" uk-toggle="target: #mobile-menu">
      <span uk-navbar-toggle-icon></span>
      <span class="uk-hidden">Menu</span>
    </a>
  </div>
</nav>

<!-- Mobile Menu (Offcanvas) -->
<div id="mobile-menu" uk-offcanvas="flip: true; overlay: true">
  <div class="uk-offcanvas-bar">
    <button class="uk-offcanvas-close" type="button" uk-close></button>
    
    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-medium-top">
      <li class="uk-active"><a href="#">Home</a></li>
      <li class="uk-parent">
        <a href="#">Products</a>
        <ul class="uk-nav-sub">
          <li><a href="#">Product 1</a></li>
          <li><a href="#">Product 2</a></li>
          <li><a href="#">Product 3</a></li>
        </ul>
      </li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    
    <!-- Mobile Search -->
    <div class="uk-margin-medium-top">
      <div class="uk-inline uk-width-1-1">
        <span class="uk-form-icon" uk-icon="icon: search"></span>
        <input class="uk-input" type="text" placeholder="Search...">
      </div>
    </div>
  </div>
</div>

<!-- Responsive Hero Section -->
<div class="uk-section uk-section-primary">
  <div class="uk-container">
    <div class="uk-grid-large uk-flex-middle" uk-grid>
      <div class="uk-width-1-2@m">
        <h1 class="uk-heading-primary">
          <span class="uk-visible@s">Welcome to Our Platform</span>
          <span class="uk-hidden@s">Welcome</span>
        </h1>
        <p class="uk-text-lead uk-visible@m">
          Building amazing digital experiences for businesses worldwide.
        </p>
        <p class="uk-text-lead uk-hidden@m">
          Amazing digital experiences.
        </p>
        
        <div class="uk-margin-medium-top">
          <button class="uk-button uk-button-default uk-button-large uk-visible@m">
            Get Started Free
          </button>
          <button class="uk-button uk-button-default uk-hidden@m">
            Get Started
          </button>
          <a href="#" class="uk-button uk-button-text uk-margin-small-left">
            Learn More
          </a>
        </div>
      </div>
      
      <div class="uk-width-1-2@m uk-visible@m">
        <div class="uk-card uk-card-default uk-card-body">
          <!-- Hero image/video -->
          <div class="uk-cover-container uk-height-medium">
            <img src="hero-image.jpg" alt="" uk-cover>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

E-commerce Product Filters

<!-- E-commerce Filters -->
<div class="uk-grid" uk-grid>
  <!-- Desktop Filters -->
  <div class="uk-width-1-4@m uk-visible@m">
    <div class="uk-card uk-card-default uk-card-body">
      <h3 class="uk-card-title">Filters</h3>
      
      <!-- Price Range -->
      <div class="uk-margin">
        <label class="uk-form-label">Price Range</label>
        <input class="uk-range" type="range" value="500" min="0" max="1000" step="50">
        <div class="uk-flex uk-flex-between uk-text-small">
          <span>$0</span>
          <span>$500</span>
          <span>$1000</span>
        </div>
      </div>
      
      <!-- Categories -->
      <div class="uk-margin">
        <label class="uk-form-label">Categories</label>
        <ul class="uk-list uk-list-divider">
          <li><label><input class="uk-checkbox" type="checkbox"> Electronics</label></li>
          <li><label><input class="uk-checkbox" type="checkbox"> Clothing</label></li>
          <li><label><input class="uk-checkbox" type="checkbox"> Home & Garden</label></li>
          <li><label><input class="uk-checkbox" type="checkbox"> Books</label></li>
        </ul>
      </div>
      
      <!-- Ratings -->
      <div class="uk-margin">
        <label class="uk-form-label">Minimum Rating</label>
        <div class="uk-flex uk-flex-wrap">
          <button class="uk-button uk-button-default uk-button-small">4+ Stars</button>
          <button class="uk-button uk-button-default uk-button-small">3+ Stars</button>
          <button class="uk-button uk-button-default uk-button-small">Any</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Products -->
  <div class="uk-width-1-1 uk-width-3-4@m">
    <!-- Mobile Filter Toggle -->
    <div class="uk-card uk-card-default uk-card-body uk-hidden@m uk-margin-bottom">
      <button class="uk-button uk-button-default uk-width-1-1" uk-toggle="target: #mobile-filters">
        <span uk-icon="icon: filter"></span> Show Filters
      </button>
    </div>
    
    <!-- Products Grid -->
    <div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-3@m" uk-grid>
      <!-- Product items here -->
      <div>
        <div class="uk-card uk-card-default">
          <div class="uk-card-media-top">
            <img src="product1.jpg" alt="">
          </div>
          <div class="uk-card-body">
            <h3 class="uk-card-title">Product Name</h3>
            <p class="uk-text-meta">$49.99</p>
          </div>
        </div>
      </div>
      <!-- More products -->
    </div>
  </div>
</div>

<!-- Mobile Filters Offcanvas -->
<div id="mobile-filters" uk-offcanvas>
  <div class="uk-offcanvas-bar">
    <button class="uk-offcanvas-close" type="button" uk-close></button>
    
    <h3>Filters</h3>
    
    <!-- Mobile-specific filters -->
    <div class="uk-margin">
      <label class="uk-form-label">Sort By</label>
      <select class="uk-select">
        <option>Price: Low to High</option>
        <option>Price: High to Low</option>
        <option>Rating</option>
        <option>Newest</option>
      </select>
    </div>
    
    <!-- Simplified categories for mobile -->
    <div class="uk-margin">
      <div class="uk-button-group uk-width-1-1">
        <button class="uk-button uk-button-default">All</button>
        <button class="uk-button uk-button-default">Top</button>
        <button class="uk-button uk-button-default">New</button>
      </div>
    </div>
    
    <!-- Apply button -->
    <div class="uk-margin-medium-top">
      <button class="uk-button uk-button-primary uk-width-1-1" uk-toggle="target: #mobile-filters">
        Apply Filters
      </button>
    </div>
  </div>
</div>

<!-- Print Receipt -->
<div class="uk-card uk-card-default uk-card-body uk-hidden-print">
  <h3 class="uk-card-title">Order Summary</h3>
  <table class="uk-table uk-table-small">
    <thead>
      <tr>
        <th>Item</th>
        <th class="uk-hidden-print">Description</th>
        <th class="uk-visible-print">Desc</th>
        <th>Qty</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Wireless Headphones</td>
        <td class="uk-hidden-print">Noise cancelling, bluetooth 5.0</td>
        <td class="uk-visible-print">Headphones</td>
        <td>1</td>
        <td>$199.99</td>
      </tr>
    </tbody>
  </table>
  
  <div class="uk-text-right">
    <div class="uk-text-large"><strong>Total: $199.99</strong></div>
    <div class="uk-visible-print">
      <p>Thank you for your purchase!</p>
      <p>Order #: INV-2023-001</p>
    </div>
  </div>
  
  <div class="uk-margin-top uk-hidden-print">
    <button class="uk-button uk-button-primary" onclick="window.print()">
      <span uk-icon="icon: print" class="uk-margin-small-right"></span>
      Print Receipt
    </button>
  </div>
</div>

/* Custom Visibility Classes */
/* Custom Breakpoints */
.uk-visible-xxs { display: none !important; }
.uk-visible-xxs@xs { display: none !important; }

@media (min-width: 360px) {
  .uk-visible-xxs { display: block !important; }
  .uk-visible-xxs@xs { display: block !important; }
}

/* Custom Device Detection */
.uk-visible-iphone {
  display: none !important;
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
  .uk-visible-iphone {
    display: block !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .uk-visible-motion {
    display: none !important;
  }
  
  .uk-hidden-motion {
    display: block !important;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .uk-visible-dark {
    display: block !important;
  }
  
  .uk-hidden-dark {
    display: none !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .uk-visible-contrast {
    display: block !important;
  }
}

/* Internet Explorer Detection */
_:-ms-lang(x), .uk-visible-ie { display: block !important; }
_:-ms-lang(x), .uk-hidden-ie { display: none !important; }

/* Print Optimization */
@media print {
  .uk-print-break-before {
    page-break-before: always;
  }
  
  .uk-print-break-after {
    page-break-after: always;
  }
  
  .uk-print-break-inside-avoid {
    page-break-inside: avoid;
  }
  
  .uk-print-hide-url a:after {
    content: none !important;
  }
}

/* Visibility Transitions */
.uk-visibility-transition {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.uk-visibility-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.uk-visibility-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Conditional Loading */
.uk-loading {
  position: relative;
  min-height: 100px;
}

.uk-loading:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 3px solid #f5f5f5;
  border-top-color: #1e87f0;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.uk-loaded .uk-loading:before {
  display: none;
}

/* Scroll-Based Visibility */
.uk-scroll-visible {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.uk-scroll-visible.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Network Status */
.uk-online {
  display: block !important;
}

.uk-offline {
  display: none !important;
}

@media (max-width: 768px) {
  .uk-online-mobile {
    display: block !important;
  }
  
  .uk-offline-mobile {
    display: none !important;
  }
}

/* JavaScript Dependency */
.uk-js-enabled {
  display: block !important;
}

.uk-js-disabled {
  display: none !important;
}

.no-js .uk-js-enabled {
  display: none !important;
}

.no-js .uk-js-disabled {
  display: block !important;
}

/* Touch Action Specific */
.uk-touch-action-none {
  touch-action: none;
}

.uk-touch-action-pan-x {
  touch-action: pan-x;
}

.uk-touch-action-pan-y {
  touch-action: pan-y;
}

/* Visibility with Delay */
.uk-delay-100 { transition-delay: 100ms; }
.uk-delay-200 { transition-delay: 200ms; }
.uk-delay-300 { transition-delay: 300ms; }
.uk-delay-500 { transition-delay: 500ms; }
.uk-delay-1000 { transition-delay: 1000ms; }

/* Staggered Visibility */
.uk-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.uk-stagger.in-view > * {
  opacity: 1;
  transform: translateY(0);
}

.uk-stagger > *:nth-child(1) { transition-delay: 100ms; }
.uk-stagger > *:nth-child(2) { transition-delay: 200ms; }
.uk-stagger > *:nth-child(3) { transition-delay: 300ms; }
.uk-stagger > *:nth-child(4) { transition-delay: 400ms; }

/* Focus Visibility */
.uk-focus-visible:focus {
  outline: 2px solid #1e87f0;
  outline-offset: 2px;
}

.uk-focus-hidden:focus {
  outline: none;
}

/* Reduced Data Mode */
@media (prefers-reduced-data: reduce) {
  .uk-data-heavy {
    display: none !important;
  }
  
  .uk-data-light {
    display: block !important;
  }
}

/* Hover Capability Detection */
@media (hover: hover) and (pointer: fine) {
  .uk-hover-capable {
    display: block !important;
  }
  
  .uk-hover-incapable {
    display: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .uk-hover-capable {
    display: none !important;
  }
  
  .uk-hover-incapable {
    display: block !important;
  }
}

/* Animation Control */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Custom Visibility States */
.uk-state-active { display: block; }
.uk-state-inactive { display: none; }

.uk-state-valid { display: block; }
.uk-state-invalid { display: none; }

.uk-state-complete { display: block; }
.uk-state-incomplete { display: none; }

/* Utility Mixins */
@mixin visible($breakpoint: null) {
  @if $breakpoint {
    @media (min-width: $breakpoint) {
      display: block !important;
    }
  } @else {
    display: block !important;
  }
}

@mixin hidden($breakpoint: null) {
  @if $breakpoint {
    @media (min-width: $breakpoint) {
      display: none !important;
    }
  } @else {
    display: none !important;
  }
}

/* Usage Examples */
.custom-visible-sm { @include visible(640px); }
.custom-hidden-md { @include hidden(960px); }

/* Responsive Text Visibility */
.responsive-text {
  font-size: 14px;
  
  @media (min-width: 768px) {
    font-size: 16px;
  }
  
  @media (min-width: 1024px) {
    font-size: 18px;
  }
}

/* Conditional Grid */
.conditional-grid {
  display: grid;
  grid-template-columns: 1fr;
  
  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Touch-Friendly Sizing */
.touch-button {
  padding: 12px 24px;
  
  @media (hover: none) and (pointer: coarse) {
    padding: 16px 32px;
    min-height: 44px; /* Apple touch target minimum */
  }
}

/* Print Optimized */
.print-optimized {
  color: black !important;
  background: white !important;
  
  @media print {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}

/* Loading States */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Reduced Motion Animation */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none !important;
    transition: none !important;
  }
}

/* High Contrast Adjustments */
@media (prefers-contrast: high) {
  .high-contrast {
    border: 2px solid currentColor;
  }
  
  .high-contrast-text {
    color: black;
    background: white;
  }
}

/* Dark Mode Adjustments */
@media (prefers-color-scheme: dark) {
  .dark-mode {
    background: #1a1a1a;
    color: #ffffff;
  }
  
  .dark-mode-invert {
    filter: invert(1) hue-rotate(180deg);
  }
}

/* Custom Device Classes */
.device-iphone {
  /* iPhone specific styles */
}

.device-android {
  /* Android specific styles */
}

.device-tablet {
  /* Tablet specific styles */
}

/* Orientation Specific */
.orientation-portrait {
  /* Portrait styles */
}

.orientation-landscape {
  /* Landscape styles */
}

/* Network Awareness */
.low-bandwidth {
  img {
    display: none;
  }
  
  video {
    display: none;
  }
}

/* Battery Saving Mode */
@media (prefers-reduced-transparency: reduce) {
  .glass-effect {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: none !important;
  }
}