// a small helper for easier mediaqueries - just define the
// breakpoints in your config as a map and you are ready to go
// by default we use the mobile-first idea, no mq == mobile
// you can set the second parameter to true an provide a custom mediaquery
@mixin mediaquery($breakpoint-value, $custom-query: false) {
  @if $breakpoint-value == print { // print styles
    @media print {
      @content;
    }
  } @else if $breakpoint-value == landscape { // landscape and portrait mediaqueries
    @media (orientation: landscape) {
      @content;
    }
  } @else if $breakpoint-value == portrait {
    @media (orientation: portrait) {
      @content;
    }
  } @else if $custom-query { // custom mediaqueries
    @if variable-exists(breakpoints) == false {
      @warn '$breakpoints Sass-map does not exist, please provide one in your config';
    } @else if map-has-key($breakpoints, $breakpoint-value) == false {
      @warn 'Index "#{$breakpoint-value}" not found in $breakpoints Sass-map using mixin mediaquery';
    } @else {
      @media #{map-get($breakpoints, $breakpoint-value)} {
        @content;
      }
    }
  } @else { // default: mobile-first mediaqueries as defined in breakpoints, they will be converted to em
    @if variable-exists(breakpoints) == false {
      @warn '$breakpoints Sass-map does not exist, please provide one in your config';
    } @else if map-has-key($breakpoints, $breakpoint-value) == false {
      @warn 'Index "#{$breakpoint-value}" not found in $breakpoints Sass-map using mixin mediaquery';
    } @else {
      @media (min-width: #{map-get($breakpoints, $breakpoint-value) * 1px}) {
        @content;
      }
    }
  }
}