// @desc - メディアクエリを`max-width`で挿入します。
// @param {String} $breakpoint [$_default-breakpoint] - 引数に変数のキーワードを渡します。
// @see - $_breakpoint-down
// @example scss - Usage
// .foo {
//   color: red;
//   @include sp {
//     color: blue;
//   }
// }
// @example css - CSS output
// .foo {
//   color: red;
// }
// @media screen and (max-width: 767px) {
//   .foo {
//     color: blue;
//   }
// }
@mixin sp($breakpoint: $_default-breakpoint) {
  @if map-has-key($_breakpoint-down, $breakpoint) {
    @media screen and (max-width: 1067px) {
      @content;
    }
  } @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
    + "Please make sure it is defined in `$_breakpoint-down` map.";
  }
}

@mixin sp02($breakpoint: $_default-breakpoint) {
  @if map-has-key($_breakpoint-down, $breakpoint) {
    @media screen and (max-width: 430px) {
      @content;
    }
  } @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
    + "Please make sure it is defined in `$_breakpoint-down` map.";
  }
}


@mixin min($breakpoint: $_default-breakpoint) {
  @if map-has-key($_breakpoint-down, $breakpoint) {
    @media screen and (max-width: 374px) {
      @content;
    }
  } @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
    + "Please make sure it is defined in `$_breakpoint-down` map.";
  }
}