how can i use @custom-media in sass mixins?

i am trying to generate @custom-media entries in a mixin, sourced from a sass map, but get the error that the media query is not a valid css value

eg

@use 'sass:map';

@mixin custom-media($breakpoints) {
  $breakpoint-names: map.keys($breakpoints);

  @each $breakpoint in $breakpoint-names {
    $media-query: null;
    $min: map.get($breakpoints, $breakpoint, width, min);
    $max: map.get($breakpoints, $breakpoint, width, max);

    @if ($min) { $min: (min-width: #{$min}); }

    @if ($max) { $max: (max-width: #{$max}); }

    @if ($min and $max) {
      $media-query: "#{$min} and #{$max}";
    }

    @else {
      $media-query: $min or $max;
    }

    @custom-media --#{breakpoint}-media-query #{$media-query};
  }
}
.root {
    @include custom-media((
        small: (
            width: (
                max: 40em,
            )
        ),
        medium: (
            width: (
                min: 40em,
                max: 80em,
            )
        ),
        large: (
            width: (
                min: 80em,
            )
        )
    ))
};

the error is (max-width: 40em) is'nt a valid css value., despite that being exactly what i want the value to be. does sass not support the @custom-media syntax?