// breakpoints.scss v1.0 | @ajlkn | MIT licensed */

// Vars.

/// Breakpoints. /// @var {list} $breakpoints: () !global;

// Mixins.

/// Sets breakpoints. /// @param {map} $x Breakpoints. @mixin breakpoints($x: ()) {

$breakpoints: $x !global;

}

/// Wraps @content in a @media block targeting a specific orientation. /// @param {string} $orientation Orientation. @mixin orientation($orientation) {

@media screen and (orientation: #{$orientation}) {
  @content;
}

}

/// Wraps @content in a @media block using a given query. /// @param {string} $query Query. @mixin breakpoint($query: null) {

$breakpoint: null;
$op: null;
$media: null;

// Determine operator, breakpoint.

// Greater than or equal.
@if (str-slice($query, 0, 2)=='>=') {

  $op: 'gte';
  $breakpoint: str-slice($query, 3);

}

// Less than or equal.
@elseif (str-slice($query, 0, 2)=='<=') {

  $op: 'lte';
  $breakpoint: str-slice($query, 3);

}

// Greater than.
@elseif (str-slice($query, 0, 1)=='>') {

  $op: 'gt';
  $breakpoint: str-slice($query, 2);

}

// Less than.
@elseif (str-slice($query, 0, 1)=='<') {

  $op: 'lt';
  $breakpoint: str-slice($query, 2);

}

// Not.
@elseif (str-slice($query, 0, 1)=='!') {

  $op: 'not';
  $breakpoint: str-slice($query, 2);

}

// Equal.
@else {

  $op: 'eq';
  $breakpoint: $query;

}

// Build media.
@if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {

  $a: map-get($breakpoints, $breakpoint);

  // Range.
  @if (type-of($a)=='list') {

    $x: nth($a, 1);
    $y: nth($a, 2);

    // Max only.
    @if ($x==null) {

      // Greater than or equal (>= 0 / anything)
      @if ($op=='gte') {
        $media: 'screen';
      }

      // Less than or equal (<= y)
      @elseif ($op=='lte') {
        $media: 'screen and (max-width: '+ $y + ')';
      }

      // Greater than (> y)
      @elseif ($op=='gt') {
        $media: 'screen and (min-width: '+ ($y + 1) + ')';
      }

      // Less than (< 0 / invalid)
      @elseif ($op=='lt') {
        $media: 'screen and (max-width: -1px)';
      }

      // Not (> y)
      @elseif ($op=='not') {
        $media: 'screen and (min-width: '+ ($y + 1) + ')';
      }

      // Equal (<= y)
      @else {
        $media: 'screen and (max-width: '+ $y + ')';
      }

    }

    // Min only.
    @else if ($y==null) {

      // Greater than or equal (>= x)
      @if ($op=='gte') {
        $media: 'screen and (min-width: '+ $x + ')';
      }

      // Less than or equal (<= inf / anything)
      @elseif ($op=='lte') {
        $media: 'screen';
      }

      // Greater than (> inf / invalid)
      @elseif ($op=='gt') {
        $media: 'screen and (max-width: -1px)';
      }

      // Less than (< x)
      @elseif ($op=='lt') {
        $media: 'screen and (max-width: '+ ($x - 1) + ')';
      }

      // Not (< x)
      @elseif ($op=='not') {
        $media: 'screen and (max-width: '+ ($x - 1) + ')';
      }

      // Equal (>= x)
      @else {
        $media: 'screen and (min-width: '+ $x + ')';
      }

    }

    // Min and max.
    @else {

      // Greater than or equal (>= x)
      @if ($op=='gte') {
        $media: 'screen and (min-width: '+ $x + ')';
      }

      // Less than or equal (<= y)
      @elseif ($op=='lte') {
        $media: 'screen and (max-width: '+ $y + ')';
      }

      // Greater than (> y)
      @elseif ($op=='gt') {
        $media: 'screen and (min-width: '+ ($y + 1) + ')';
      }

      // Less than (< x)
      @elseif ($op=='lt') {
        $media: 'screen and (max-width: '+ ($x - 1) + ')';
      }

      // Not (< x and > y)
      @elseif ($op=='not') {
        $media: 'screen and (max-width: '+ ($x - 1) + '), screen and (min-width: '+ ($y + 1) + ')';
      }

      // Equal (>= x and <= y)
      @else {
        $media: 'screen and (min-width: '+ $x + ') and (max-width: '+ $y + ')';
      }

    }

  }

  // String.
  @else {

    // Missing a media type? Prefix with "screen".
    @if (str-slice($a, 0, 1)=='(') {
      $media: 'screen and '+ $a;
    }

    // Otherwise, use as-is.
    @else {
      $media: $a;
    }

  }

}

// Output.
@media #{$media} {
  @content;
}

}