@use 'sass:map';
@use 'breakpoints' as *;

@mixin container-query-min($min: null, $container-name: null) {
  @if map.has-key($breakpoints, $min) {
    $value: #{map.get($breakpoints, $min)}px;
    @if $container-name {
      @container #{$container-name} (min-width: #{$value}) {
        @content;
      }
    } @else {
      @container (min-width: #{$value}) {
        @content;
      }
    }
  } @else {
    @error "[STIHL Design System] - [ds.container-query-min()]: Passed '#{$min}' breakpoint is not available in ds.container-query-min() mixin.";
  }
}

@mixin container-query-max($max: null, $container-name: null) {
  @if map.has-key($breakpoints, $max) {
    $value: #{map.get($breakpoints, $max)}px;
    @if $container-name {
      @container #{$container-name} (width < #{$value}) {
        @content;
      }
    } @else {
      @container (width < #{$value}) {
        @content;
      }
    }
  } @else {
    @error "[STIHL Design System] - [ds.container-query-max()]: Passed '#{$max}' breakpoint is not available in ds.container-query-max() mixin.";
  }
}

@mixin container-query-min-max($min: null, $max: null, $container-name: null) {
  @if map.has-key($breakpoints, $min) and map.has-key($breakpoints, $max) {
    $min-value: #{map.get($breakpoints, $min)}px;
    $max-value: #{map.get($breakpoints, $max)}px;
    @if $container-name {
      @container #{$container-name} (min-width: #{$min-value}) and (width < #{$max-value}) {
        @content;
      }
    } @else {
      @container (min-width: #{$min-value}) and (width < #{$max-value}) {
        @content;
      }
    }
  } @else {
    @error "[STIHL Design System] - [ds.container-query-min-max()]: Passed '#{$min}' and/or '#{$max}' breakpoint is not available in ds.container-query-min-max() mixin.";
  }
}