// 888                               888                        d8b          888
// 888                               888                        Y8P          888
// 888                               888                                     888
// 88888b.  888d888 .d88b.   8888b.  888  888 88888b.   .d88b.  888 88888b.  888888 .d8888b
// 888 "88b 888P"  d8P  Y8b     "88b 888 .88P 888 "88b d88""88b 888 888 "88b 888    88K
// 888  888 888    88888888 .d888888 888888K  888  888 888  888 888 888  888 888    "Y8888b.
// 888 d88P 888    Y8b.     888  888 888 "88b 888 d88P Y88..88P 888 888  888 Y88b.       X88
// 88888P"  888     "Y8888  "Y888888 888  888 88888P"   "Y88P"  888 888  888  "Y888  88888P'
//                                           888
//                                           888
//                                           888

// Breakpoints
//
// ```scss
// @include breakpoint($point)
// ```
//
// The `breakpoint()` Sass mixin takes a single required parameter. You must pass in a breakpoint name or a number. If a breakpoint name is passed, the `$breakpoints` list as defined in [Tokens ➔ Breakpoints](/tokens/breakpoints) is used for a minimum-width. If a number is passed, that number of pixels is used as a minimum-width.
//
// This will cause any styles between the following set of `{}` brackets to be applied only to screen sizes wider than the breakpoint passed.
//
// Applying the CSS generated by the example below, any element with the `.disclaimer` class would have a border when the browser width is less than the *medium* (`800px`) breakpoint, but would have no border when the browser is wider than that.
//
// Markup:
// SCSS:
// .disclaimer {
//   border: $border-base;
// ​
//   @include breakpoint(m) {
//     border: none;
//   }
// }
//
// Styleguide SassDirectives.Breakpoints
//
// Weight: 1
@mixin breakpoint($point) {
  @if type-of($point) == number {
    @media (min-width: inspect($point) + 'px') {
      @content;
    }
  }
  @if type-of($point) != number {
    @each $name, $width in $breakpoints {
      @if $name == $point {
        @media (min-width: $width) {
          @content;
        }
      }
    }
  }
}