// Container Queries mixin
//
// Provides container queries with media query fallback for browsers without support.
// Container queries allow components to respond to their container's size rather than the viewport.
//
// Usage:
//   .my-component {
//     container-type: inline-size;
//     container-name: my-container;
//
//     @include cq('my-container', 48rem) {
//       // Styles for containers >= 768px wide
//     }
//   }
//
// @param $container-name - The name of the container to query
// @param $min-width - The minimum width threshold (in rem or other CSS units)

@mixin cq($container-name, $min-width) {
  @supports not (container-type: inline-size) {
    @media screen and (min-width: $min-width) {
      @content;
    }
  }

  @supports (container-type: inline-size) {
    @container #{$container-name} (min-width: #{$min-width}) {
      @content;
    }
  }
}

// Common breakpoint values (matching the bp mixin values)
$cq-bp-tablet: 48rem; // 768px
$cq-bp-tablet-big: 64rem; // 1024px
$cq-bp-laptop: 80rem; // 1280px