@use 'sass:map';
@import './breakpoints';

// This mixin is very similar to the `breakpoint` mixin - and uses the same sizing map - but for container queries.
// We should use container queries when the styling of a parent is more important than the styling of the page,
// e.g. we use it on carousels to ensure we show different numbers of cards when the carousel is different sizes
// Find out more: https://blog.logrocket.com/css-container-queries-guide/

@mixin container-query($container, $type, $breakpoint) {
  @if map-has-key($breakpoint-sizes, $breakpoint) {
    $breakpoint: map.get($breakpoint-sizes, $breakpoint);
  }

  @container #{$container} (#{$type}: #{$breakpoint}px) {
    @content;
  }
}
