
/* BREAKPOINTS */

// Viewport equal or greater than `$breakpoint`

@mixin media-breakpoint-up ( $breakpoint ) {

  $min: breakpoint-min( $breakpoint );

  @if $min {

    @media ( min-width: $min ) {
      @content;
    }

  } @else {

    @content;

  }

}

// Viewport equal or lower than `$breakpoint`

@mixin media-breakpoint-down ( $breakpoint ) {

  $max: breakpoint-max( $breakpoint );

  @if $max {

    @media ( max-width: $max ) {
      @content;
    }

  } @else {

    @content;

  }

}

// Viewport within `$breakpoint`

@mixin media-breakpoint-only ( $breakpoint ) {

  @include media-breakpoint-up( $breakpoint ) {

    @include media-breakpoint-down( $breakpoint ) {

      @content;

    }

  }

}

// Viewport within 2 `$breakpoint-lower` and `$breakpoint-upper`

@mixin media-breakpoint-range ( $breakpoint-lower, $breakpoint-upper ) {

  @include media-breakpoint-up( $breakpoint-lower ) {

    @include media-breakpoint-down( $breakpoint-upper ) {

      @content;

    }

  }

}

// Viewport outside 2 `$breakpoint-lower` and `$breakpoint-upper`

@mixin media-breakpoint-xrange ( $breakpoint-lower, $breakpoint-upper ) {

  $width-min: breakpoint-min( $breakpoint-lower );
  $width-max: breakpoint-max( $breakpoint-upper );

  @media screen and ( max-width: $width-min ), screen and ( min-width: $width-max ) {
    @content;
  }

}
