/*
 * BREAKPOINT TESTS
 */


// Import Breakpoint
@import "breakpoint";

//////////////////////////////
// Breakpoint Flags
//////////////////////////////
// Default Features
// $breakpoint-default-media:    screen;
// $breakpoint-default-feature:  max-width;
// $breakpoint-default-pair:     'width';

// Default Transforms
// $breakpoint-force-media-all:    true;
// $breakpoint-to-ems:             false;
// $breakpoint-resolution:         true;

// Default No Query Options
// $breakpoint-no-queries:       false;
// $breakpoint-no-query-fallbacks: false;

// Deftault Base Font Size
// $breakpoint-base-font-size: 16px;


// TESTS

$single-pixel-value: 500px;
$single-em-value: 30em;
$breakpoint-to-ems: false;

$breakpoints: add-breakpoint('single pixel value', $single-pixel-value);
$breakpoints: add-breakpoint('single pixel value, em', $single-em-value);

/*
 * Assume $breakpoint-default-feature
 * if only a number
 * $single-pixel-value: #{$single-pixel-value};
 * $single-em-value: #{$single-em-value};
 */
.breakpoint-default-feature {
  @include breakpoint($single-pixel-value) {
    content: '$single-pixel-value';
    content: '@media (min-width: 500px)';
  }
  @include breakpoint($single-em-value) {
    content: '$single-em-value';
    content: '@media (min-width: 30em)';
  }

  @include respond-to('single pixel value') {
    content: '$single-pixel-value';
    content: '@media (min-width: 500px)';
  }
  @include respond-to('single pixel value, em') {
    content: '$single-em-value';
    content: '@media (min-width: 30em)';
  }
}
/* $breakpoint-to-ems: true; */
$breakpoint-to-ems: true;
.breakpoint-default-feature-to-ems {
  @include breakpoint($single-pixel-value) {
    content: '$single-pixel-value';
    content: '@media (min-width: 31.25em)';
  }
  @include breakpoint($single-em-value) {
    content: '$single-em-value';
    content: '@media (min-width: 30em)';
  }
}



$feature-first: height 500px ;
$value-first: 500px height;
$arbitrary-feature: lion 500px;
$feature-value-both-strings: portrait orientation;
$breakpoint-to-ems: false;
/*
 * Single value with feature
 * $feature-first : #{$feature-first};
 * $value-first : #{$value-first};
 * $arbitrary-feature : #{$arbitrary-feature};
 * $feature-value-both-strings : #{$feature-value-both-strings};
 */
.feature-value-pair {
  @include breakpoint($feature-first) {
    content: '$feature-first';
    content: '@media (height: 500px)';
  }
  @include breakpoint($value-first) {
    content: '$value-first';
    content: '@media (height: 500px)';
  }
  @include breakpoint($arbitrary-feature) {
    content: '$arbitrary-feature';
    content: '@media (lion: 500px)';
  }
  @include breakpoint($feature-value-both-strings) {
    content: '$feature-value-both-strings';
    content: '@media (orientation: portrait)';
  }
}
/* $breakpoint-to-ems: true; */
$breakpoint-to-ems: true;
.feature-value-pair-to-ems {
  @include breakpoint($feature-first) {
    content: '$feature-first';
    content: '@media (height: 31.25em)';
  }
  @include breakpoint($value-first) {
    content: '$value-first';
    content: '@media (height: 31.25em)';
  }
  @include breakpoint($arbitrary-feature) {
    content: '$arbitrary-feature';
    content: '@media (lion: 31.25em)';
  }
}



$min-max-default-feature: 500px 700px;
$breakpoint-to-ems: false;
/*
 * Set min-width/max-width
 * if both values are numbers
 * $min-max-default-feature : #{$min-max-default-feature};
 */
.min-max-default-feature {
  @include breakpoint($min-max-default-feature) {
    content: '$min-max-default-feature';
    content: '@media (min-width: 500px) and (max-width: 700px)';
  }
}
/* $breakpoint-to-ems: true; */
$breakpoint-to-ems: true;
.min-max-default-feature-to-ems {
  @include breakpoint($min-max-default-feature) {
    content: '$min-max-default-feature';
    content: '@media (min-width: 31.25em) and (max-width: 43.75em)';
  }
}



$feature-min-max: height 300px 700px;
$min-max-feature: 300px 700px height;
$arbitrary-feature-min-max: lion 300px 700px;
$breakpoint-to-ems: false;
/*
 * Set min/max of feature
 * if there are two numbers and a feature
 * $feature-min-max : #{$feature-min-max};
 * $min-max-feature : #{$min-max-feature};
 * $arbitrary-feature-min-max : #{$arbitrary-feature-min-max};
 */
.min-max-feature {
  @include breakpoint($feature-min-max) {
    content: '$feature-min-max';
    content: '@media (min-height: 300px) and (max-height: 700px)';
  }
  @include breakpoint($min-max-feature) {
    content: '$min-max-feature';
    content: '@media (min-height: 300px) and (max-height: 700px)';
  }
  @include breakpoint($arbitrary-feature-min-max) {
    content: '$arbitrary-feature-min-max';
    content: '@media (min-lion: 300px) and (max-lion: 700px)';
  }
}
/* $breakpoint-to-ems: true; */
$breakpoint-to-ems: true;
.min-max-feature-to-ems {
  @include breakpoint($feature-min-max) {
    content: '$feature-min-max';
    content: '@media (min-height: 18.75em) and (max-height: 43.75em)';
  }
  @include breakpoint($min-max-feature) {
    content: '$min-max-feature';
    content: '@media (min-height: 18.75em) and (max-height: 43.75em)';
  }
  @include breakpoint($arbitrary-feature-min-max) {
    content: '$arbitrary-feature-min-max';
    content: '@media (min-lion: 18.75em) and (max-lion: 43.75em)';
  }
}


$multidimensional: (max-width 700px) (orientation portrait);
$breakpoint-to-ems: false;
/*
 * Multidimensional lists,
 * assume each item is a feature value pair
 * $multidimensional : #{$multidimensional};
 */
.multidimensional {
  @include breakpoint($multidimensional) {
    content: '$multidimensional';
    content: '@media (max-width: 700px) and (orientation: portrait)';
  }
}
/* $breakpoint-to-ems: true; */
$breakpoint-to-ems: true;
.multidimensional-to-ems {
  @include breakpoint($multidimensional) {
    content: '$multidimensional';
    content: '@media (max-width: 43.75em) and (orientation: portrait)';
  }
}


$basic-or: 500px, tv 700px color;
$breakpoint-to-ems: false;

$breakpoints: add-breakpoint('basic or', $basic-or);
/*
 * 'OR' mediaqueries.
 * tests separated by commas
 * $basic-or : #{$basic-or};
 */
.basic-or {
  @include breakpoint($basic-or) {
    content: '$basic-or';
    content: '@media (max-width: 700px) and (orientation: portrait)';
  }
  @include respond-to('basic or') {
    content: '$basic-or';
    content: '@media (max-width: 700px) and (orientation: portrait)';
  }
}
/* $breakpoint-to-ems: true; */
$breakpoint-to-ems: true;
.basic-or-to-ems {
  @include breakpoint($basic-or) {
    content: '$basic-or';
    content: '@media (max-width: 43.75em) and (orientation: portrait)';
  }
}


$monochrome: monochrome;
$monochrome-double: 300px monochrome;
$multidimensional-plus-one-sided: (max-width 700px) (orientation portrait) (monochrome);
$breakpoint-to-ems: false;
/*
 * One-sided features (ie. monochrome)
 * $monochrome : #{$monochrome};
 * $monochrome-double : #{$monochrome-double};
 * $multidimensional-plus-one-sided : #{$multidimensional-plus-one-sided};
 */
.one-sided {
  @include breakpoint($monochrome) {
    content: '$monochrome';
    content: '@media (monochrome)';
  }
  @include breakpoint($monochrome-double) {
    content: '$monochrome-double';
    content: '@media (monochrome) and (min-width: 300px)';
  }
  @include breakpoint($multidimensional-plus-one-sided) {
    content: '$multidimensional-plus-one-sided';
    content: '@media (max-width: 700px) and (orientation: portrait) and (monochrome)';
  }
}
/* $breakpoint-to-ems: true; */
$breakpoint-to-ems: true;
.one-sided-to-ems {
  @include breakpoint($monochrome-double) {
    content: '$monochrome-double';
    content: '@media (monochrome) and (min-width: 18.75em)';
  }
  @include breakpoint($multidimensional-plus-one-sided) {
    content: '$multidimensional-plus-one-sided';
    content: '@media (max-width: 43.75em) and (orientation: portrait) and (monochrome)';
  }
}


$not: 'not screen';
$not-plus-default: 'not tv' 500px;
$breakpoint-to-ems: false;
/*
 * One-sided features (ie. monochrome)
 * $not : #{$not};
 */
.not {
  @include breakpoint($not) {
    content: '$not';
    content: '@media not screen';
  }
  @include breakpoint($not-plus-default) {
    content: '$not-plus-default';
    content: '@media not tv and (min-width: 500px)';
  }
}


$aspect-ratio: 'min-aspect-ratio' '300/250';
$device-aspect-ratio: 'max-device-aspect-ratio' '320/480';
$breakpoint-to-ems: false;
/*
 * Double string feature (i.e. string: string)
 * $aspect-ratio : #{$aspect-ratio};
 * $device-aspect-ratio : #{$device-aspect-ratio};
 */
.aspect-ratio {
  @include breakpoint($aspect-ratio) {
    content: '$aspect-ratio';
    content: '@media (min-aspect-ratio: 300/250)';
  }
  @include breakpoint($device-aspect-ratio) {
    content: '$device-aspect-ratio';
    content: '@media (max-device-pixel-ratio: 320/480)';
  }
}

$legacy: 'not screen', 500px, 'no-query' '.no-mq';
$breakpoint-to-ems: false;
$breakpoint-legacy-syntax: true;
/*
 * One-sided features (ie. monochrome)
 * $not : #{$not};
 */
.legacy {
  @include breakpoint($legacy) {
    content: '$legacy';
    content: '@media not screen and (min-width: 500px)';
  }
}
$breakpoint-legacy-syntax: false;

$device-pixel-ratio: 'resolution' 2dppx;
$resolution: 'min-resolution' 192dpi;
$breakpoint-resolutions: true;

$breakpoints: add-breakpoint('device pixel ratio', $device-pixel-ratio);
/*
 * Resolution queries, device pixel ratio and standard resolution
 * $device-pixel-ratio: #{$device-pixel-ratio}
 * $resolution: #{$resolution}
 */
.resolution {
  @include breakpoint($device-pixel-ratio) {
    content: $device-pixel-ratio;
    content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-mox-device-pixel-ratio: 2), (resolution: 192dpi)';
  }
  @include breakpoint($resolution) {
    content: $resolution;
    content: '@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2)';
  }

  @include respond-to('device pixel ratio') {
    content: $device-pixel-ratio;
    content: '@media (resolution: 2dppx), (-webkit-device-pixel-ratio: 2), (-mox-device-pixel-ratio: 2), (resolution: 192dpi)';
  }
}

$context-simple: 500px;
$context-single: monochrome;
$context-and: 500px 700px;
$context-max: max-width 700px;
$context-string: orientation portrait;
$context-triple: height 800px 1000px;
$context-media-type: (print);
$context-or: (500px) (max-height 1200px), 600px 700px;
$context-complex: 500px, (screen) (500px 700px), (300px) (monochrome);
/*
 * Queries to test Breakpoint Get Context
 * $context-simple: #{$context-simple}
 * $context-single: #{$context-single}
 * $context-and: #{$context-and}
 * $context-max: #{$context-max}
 * $context-string: #{$context-string}
 * $context-triple: #{$context-triple}
 * $context-media-type: #{$context-media-type}
 * $context-or: #{$context-or}
 * $context-complex: #{$context-complex}
 */
.context {
  @include breakpoint($context-simple) {
    content: '@media (min-width: 500px)';
    @debug breakpoint-get-context(min-width);
  }
  @include breakpoint($context-single) {
    content: '@media (monochrome)';
    @debug breakpoint-get-context(monochrome);
  }
  @include breakpoint($context-and) {
    content: '@media (min-width: 500px) and (max-width: 700px)';
    @debug breakpoint-get-context(min-width);
    @debug breakpoint-get-context(max-width);
  }
  @include breakpoint($context-max) {
    content: '@media (max-width: 700px)';
    @debug breakpoint-get-context(max-width);
  }
  @include breakpoint($context-string) {
    content: '@media (orientation: portrait)';
    @debug breakpoint-get-context(orientation);
  }
  @include breakpoint($context-triple) {
    content: '@media (min-height: 800px) and (max-height: 1000px)';
    @debug breakpoint-get-context(min-height);
    @debug breakpoint-get-context(max-height);
  }
  @include breakpoint($context-media-type) {
    content: '@media print';
    @debug breakpoint-get-context(media);
  }
  @include breakpoint($context-or) {
    content: '@media (min-width: 500px) and (max-height: 1200px), (min-width: 600px) and (max-width: 700px)';
    @debug breakpoint-get-context(min-width);
    @debug breakpoint-get-context(max-width);
    @debug breakpoint-get-context(max-height);
    @debug breakpoint-get-context(orientation);
  }
  @include breakpoint($context-complex) {
    content: '@media (min-width: 500px), screen and (min-width: 500px) and (max-width: 700px), (monochrome) and (min-width: 300px)';
    @debug breakpoint-get-context(min-width);
    @debug breakpoint-get-context(max-width);
    @debug breakpoint-get-context(media);
    @debug breakpoint-get-context(monochrome);
  }
}


$dynamic-context: 400px ('min-height' 200px), (300px 325px) (orientation portriat) monochrome;
$test: 350px;

@mixin context-test() {
  $min-width: breakpoint-get-context('foo');

  $found: false;

  @if $min-width {
    @each $context in $min-width {
      @if $context != false {
        @if ($test > $context) {
          content: 'In Context!';
          $found: true;
        }
      }
    }
  }
  @else {
    content: 'No Context!';
    $found: true;
  }

  @if not $found {
    content: 'Not In Context';
  }
}

#dynamic {
  @include context-test;

  @include breakpoint($dynamic-context) {
    @include context-test;
  }
}


$multi-media: 300px, print, 200px;

#multi-media {
  @include breakpoint($multi-media) {
    @debug breakpoint-get-context('media');
  }
}