@use 'sass:list';
@use 'sass:map';

$breakpoint-sizes: (
  'sm': 580,
  'md': 769,
  'md-lg': 1024,
  'lg': 1180,
);

// This mixin lets us use fast references for common breakpoints, using the map above,
// and lets us reference custom breakpoints by passing in a number. It lets us code
// breakpoints a bit faster by not having to type out the full media query each time.
@mixin breakpoint($types, $breakpoints) {
  $media: ('only screen');

  @for $i from 1 through length($types) {
    $type: list.nth($types, $i);
    $breakpoint: list.nth($breakpoints, $i);

    @if map-has-key($breakpoint-sizes, list.nth($breakpoints, $i)) {
      $breakpoint: map.get($breakpoint-sizes, list.nth($breakpoints, $i));
    }

    $query: 'and (#{$type}: #{$breakpoint}px)';
    $media: list.append($media, $query, $separator: space);
  }

  @media #{$media} {
    @content;
  }
}
