@use 'sass:map';
@use 'variables';

/// Min breakpoint mixin, can be used to set media individually. Use breakpoint names; xs, sm, md,
/// lg and xl to set the breakpoint value e.g @include media-min-width(sm).
/// @author Richard McCartney
/// @param {String} $breakpoint - Breakpoint screen value
/// @require $media-min-widths
@mixin media-min-width($breakpoint) {
  @if map.has-key(variables.$media-min-widths, $breakpoint) {
    @media screen and (min-width: #{map.get(variables.$media-min-widths, $breakpoint)}) {
      @content;
    }
  } @else {
    @warn 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. ' + 'Please make sure it is defined in `$breakpoints` map.';
  }
}

/// Max breakpoint mixin, can be used to set media individually. Use breakpoint names; xs, sm, md,
/// lg and xl to set the breakpoint value e.g @include media-max-width(sm).
/// @author Richard McCartney
/// @param {String} $breakpoint - Breakpoint screen value
/// @require $media-max-widths
@mixin media-max-width($breakpoint) {
  @if map.has-key(variables.$media-max-widths, $breakpoint) {
    @media screen and (max-width: #{map.get(variables.$media-max-widths, $breakpoint)}) {
      @content;
    }
  } @else {
    @warn 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. ' + 'Please make sure it is defined in `$breakpoints` map.';
  }
}