// Responsive utilities

// Breakpoints
@xs: ~"(max-width: 480px)";
@sm: ~"(max-width: 640px)";
@md: ~"(max-width: 768px)";
@lg: ~"(max-width: 1024px)";
@mobile: ~"(max-width: 640px)";
@tablet: ~"(max-width: 768px)";
@desktop: ~"(max-width: 1024px)";

/**
 * @section Responsive Visibility
 */

// Show/hide utilities (v1 compatible)
@media @xs {
  /** @public Hide on extra small screens */
  .xs-hide { display: none !important; }
  /** @public Show on extra small screens */
  .xs-show { display: block !important; }
}

@media @sm {
  /** @public Hide on small screens */
  .sm-hide { display: none !important; }
  /** @public Show on small screens */
  .sm-show { display: block !important; }
}

@media @md {
  /** @public Hide on medium screens */
  .md-hide { display: none !important; }
  /** @public Show on medium screens */
  .md-show { display: block !important; }
}

@media @lg {
  /** @public Hide on large screens */
  .lg-hide { display: none !important; }
  /** @public Show on large screens */
  .lg-show { display: block !important; }
}

// Show/hide utilities (v2 style - deprecated, use xs/sm/md/lg instead)
@media @mobile {
  /** @public Hide on mobile (deprecated) */
  .md-hidden { display: none !important; }
  /** @public Show on mobile (deprecated) */
  .md-visible { display: block !important; }
}

@media @tablet {
  /** @public Hide on tablet (deprecated) */
  .tablet-hidden { display: none !important; }
  /** @public Show on tablet (deprecated) */
  .tablet-visible { display: block !important; }
}

@media @desktop {
  /** @public Hide on desktop (deprecated) */
  .desktop-hidden { display: none !important; }
  /** @public Show on desktop (deprecated) */
  .desktop-visible { display: block !important; }
}