// Breakpoint Mixin // —————- // writing out CSS media queries by hand is a pain, // to write awesome media queries, simply @include this mixin // // Example: // @include breakpoint(key-word) { // write your code here // } //

@mixin breakpoint($val) {

@if $val == "small" {
  @media (min-width: $small-breakpoint) {
    @content;
  }
} @else if $val == "small-only" {
  @media (min-width: $small-breakpoint) and (max-width: $medium-breakpoint) {
    @content;
  }
} @else if $val == "small-down" {
  @media (max-width: $medium-breakpoint) {
    @content;
  }
} @else if $val == "medium" {
  @media (min-width: $medium-breakpoint) {
    @content;
  }
} @else if $val == "medium-only" {
  @media (min-width: $medium-breakpoint) and (max-width: $large-breakpoint) {
    @content;
  }
} @else if $val == "medium-down" {
  @media (max-width: $large-breakpoint) {
    @content;
  }
} @else if $val == "medium" {
  @media (min-width: $medium-breakpoint) {
    @content;
  }
} @else if $val == "medium-only" {
  @media (min-width: $medium-breakpoint) and (max-width: $large-breakpoint) {
    @content;
  }
} @else if $val == "medium-down" {
  @media (max-width: $large-breakpoint) {
    @content;
  }
} @else if $val == "large" {
  @media (min-width: $large-breakpoint) {
    @content;
  }
} @else if $val == "large-only" {
  @media (min-width: $large-breakpoint) and (max-width: $xlarge-breakpoint) {
    @content;
  }
} @else if $val == "large-down" {
  @media (max-width: $xlarge-breakpoint) {
    @content;
  }
} @else if $val == "xlarge" {
  @media (min-width: $xlarge-breakpoint) {
    @content;
  }
} @else if $val == "xlarge-only" {
  @media (min-width: $xlarge-breakpoint) and (max-width: $xxlarge-breakpoint) {
    @content;
  }
} @else if $val == "xlarge-down" {
  @media (max-width: $xxlarge-breakpoint) {
    @content;
  }
} @else if $val == "xxlarge" {
  @media (min-width: $xxlarge-breakpoint) {
    @content;
  }
} @else {
  @media #{$val} {
    @content;
  }
}

}