@use 'sass:map';

$breakpoints: (
  'mobile': 375px,
  'tablet': 768px,
  'laptop': 1024px,
  'desktop': 1440px
) !default;

// Breakpoints

@mixin min-width($breakpoint) {
  @if map.has-key($breakpoints, $breakpoint) {
    @media (min-width: map.get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @error "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

@mixin max-width($breakpoint) {
  @if map.has-key($breakpoints, $breakpoint) {
    @media (max-width: (map.get($breakpoints, $breakpoint) - 1px)) {
      @content;
    }
  } @else {
    @error "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}