// Query utilities: container and media helpers with shared breakpoints

$breakpoints: (
	"sm": 480px,
	"md": 640px,
	"lg": 768px,
	"xl": 1024px,
	"2xl": 1280px
);

@mixin mq($cond) {
	@media #{$cond} { @content; }
}

@mixin mq-up($key) {
	$val: map-get($breakpoints, $key);
	@media (min-width: $val) { @content; }
}

@mixin mq-down($key) {
	$val: map-get($breakpoints, $key);
	@media (max-width: $val) { @content; }
}

@mixin cq($cond) {
	@container #{$cond} { @content; }
}

@mixin cq-size($min: null, $max: null) {
	$parts: ();
	@if $min != null { $parts: append($parts, '(min-inline-size: ' + $min + ')'); }
	@if $max != null { $parts: append($parts, '(max-inline-size: ' + $max + ')'); }
	@container #{join($parts, ' and ')} { @content; }
}